含左浮动图片的标题设置overflow:hidden后下方文字布局调整问题

解决方案 #

你可以通过给外层li设置左内边距预留图片位置，再将左侧浮动图片通过负外边距拉到预留位置的方式实现，全程无需修改HTML结构，仅调整CSS即可：

修改后的完整CSS代码如下 #

/* 新增li样式，预留左侧图片位置 */
li {
  padding-left: calc(100px + 1em);
  box-sizing: border-box;
}

img{
  float: left;
  margin-right: 1em;
  /* 新增负左外边距，将图片拉到左侧预留位置 */
  margin-left: calc(-100px - 1em);
  width: 100px;
  height: 100px;
  box-shadow: none;
  border:1px solid
}

.title{
  display:block;
  font-size:18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

实现逻辑说明 #

• 给外层li设置padding-left，值为图片宽度加图片右侧边距，让li内所有默认排列的内容（标题、配送时间、价格）都自动排列在图片右侧区域，不会跑到图片下方
• 给img设置等值的负左外边距，将图片从内容区域拉到左侧的内边距空位中，保留原有左浮效果，不影响标题文字的溢出省略逻辑
• 原有.title的溢出省略配置完全保留，无需修改，下方的配送时间、价格元素会自动在右侧内容区域按顺序排列在标题正下方

如果你的场景需要兼容不支持calc的老旧浏览器，可直接将值替换为固定数值，比如1em按默认16px计算的话，设置padding-left: 116px，对应margin-left: -116px即可。

内容的提问来源于stack exchange，提问作者user13900862