CSS停止图像下的文字换行

一尘不染

css

我有以下标记：

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <span>Text, text and more text</span>
</li>

我想要它，以便如果文本自动换行，就不会进入图像的“列”。我知道我可以用table（我正在做的）做到这一点，但是由于这个原因这是行不通的。

我已经尝试了以下方法，但均未成功：

li span {width: 100px; margin-left: 20px}
.fav_star {width: 20px}

我也试过了float: right。

谢谢。

编辑：我希望它看起来像这样：

IMG   Text starts here and keeps going... and
      wrap starts here.

不是这样的：

IMG   Text starts here and keeps going... and 
wrap starts in the space left for the image.

阅读 273

2020-05-16

共1个答案

一尘不染

由于这个问题引起了广泛的关注，并且这是公认的答案，因此我认为需要添加以下免责声明：

该答案特定于OP的问题（示例中设置了宽度）。当它起作用时，它要求您在每个元素，图像和段落上都有一个宽度。除非您有此要求，否则我建议使用Joe将作为该问题的另一个答案发布。

该span元素是一个内联元素，您不能在CSS中更改其宽度。

您可以将以下CSS添加到您的跨度中，以便可以更改其宽度。

display: block;

通常更有意义的另一种方法是将<p>元素用作的父元素<span>。

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <p>
     <span>Text, text and more text</span>
  </p>
</li>

由于<p>是一个block元素，因此您可以使用CSS设置其宽度，而无需进行任何更改。

但是在两种情况下，由于现在都有一个block元素，因此需要浮动图像，以使文本不会全部移到图像下方。

li p{width: 100px; margin-left: 20px}
.fav_star {width: 20px;float:left}

PS float:left也可以戴上图像，而不是在图像float:right上，li p但在这种情况下，还需要text- align:left正确地重新对齐文本。

PSS如果您继续第一个不添加<p>元素的解决方案，那么CSS应该如下所示：

li span{width: 100px; margin-left: 20px;display:block}
.fav_star {width: 20px;float:left}

2020-05-16