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.

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

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

该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}

PSfloat: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}

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

<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/

对于那些想要一些背景信息的人，这里有一篇简短的文章解释了为什么overflow: hidden起作用。它与所谓的块格式化上下文有关。这是W3C规范的一部分（即不是hack），基本上是具有块类型流的元素所占据的区域。

每次应用时，overflow: hidden都会创建一个新的块格式上下文。但这不是能够触发该行为的唯一属性。引用悉尼Web Apps Group的Fiona Chan的演讲：

• 浮动：左/右
• 溢出：隐藏/自动/滚动
• 显示：表格单元格和任何与表格相关的值/内联块
• 位置：绝对/固定

如果你想在margin-left一个上工作span元素，你需要使它display: inline-block或display:block为好。

设置display:flex文字对我有用。

将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%;
            }

减

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

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