Question

我有以下标记：

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

我想要它，以便如果文本换行，它不会进入图像的“列”。我知道我可以使用table（我正在做）这样做，但这对this reason无效。

我尝试了以下但没有成功：

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.

Answer 1

这个问题的答案非常简单，似乎吸引了很多人：

<img src="url-to-image">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

    img {
        float: left;
    }
    p {
        overflow: hidden;
    }

参见示例：http://jsfiddle.net/vandigroup/upKGe/132/

Answer 2

由于这个问题获得了很多意见，这是公认的答案，我觉得有必要添加以下免责声明：

这个答案特定于OP的问题（在示例中设置了宽度）。虽然它有效，但它要求您在每个元素，图像和段落上都有一个宽度。除非这是您的要求，否则我建议您使用Joe Conlin's solution作为此问题的另一个答案。

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设置其宽度，而无需更改任何内容。

但是在这两种情况下，由于你现在有一个块元素，你需要浮动图像，这样你的文字就不会全部落在你的图像之下。

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

P.S。您可以在float:left上放置float:right而不是li p，但在这种情况下，您还需要text-align:left才能正确重新对齐文字。

P.S.S。如果您继续使用第一个不添加<p>元素的解决方案，那么您的CSS应如下所示：

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

Answer 3

对于那些想要一些背景信息的人，这里有一个short article解释overflow: hidden为什么有效。它与所谓的块格式化上下文有关。这是W3C规范的一部分（即不是黑客），基本上是由具有块类型流的元素占用的区域。

每次应用时，overflow: hidden都会创建新块格式化上下文。但它并不是唯一能够触发这种行为的财产。来自悉尼网络应用集团的Fiona Chan引用presentation：

float：left / right

溢出：隐藏/自动/滚动

display：table-cell和任何与表相关的值/ inline-block

职位：绝对/固定

Answer 4

如果您希望margin-left使用span元素，则需要将其设为display: inline-block或display:block。

Answer 5

为我工作的文字设置display:flex。

Answer 6

在图像和跨度周围包裹div并将以下内容添加到CSS中：

HTML

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

CSS

            #CN2787 > div { 
                display: inline-block;
                vertical-align: top;
            }

            #CN2787 > div:first-of-type {
                width: 35%;
            }

            #CN2787 > div:last-of-type {
                width: 65%;
            }

LESS

        #CN2787 {
            > div { 
                display: inline-block;
                vertical-align: top;
            }

            > div:first-of-type {
                width: 35%;
            }
            > div:last-of-type {
                width: 65%;
            }
        }

CSS停止文本包装在图像下

6 个答案:

由于这个问题获得了很多意见，这是公认的答案，我觉得有必要添加以下免责声明：