CSS停止在图像文本换行CSS停止在图像文本换行(CSS to stop text wrapping

我有以下的标记：

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

Answer 1:

因为这个问题正在获得大量的意见，这是公认的答案，我觉得有必要添加如下声明：

这个答案是具体到OP的问题（其中有宽度的例子中设置）。 虽然它的工作原理，它需要你对每一个元素，图像和段落的宽度。 除非那是你的要求，我建议使用乔·康林的解决方案这是张贴在这个问题的另一个答案。

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

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}

Answer 2:

对于这个问题，似乎搭上了很多人很简单的答案：

<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 3:

对于那些谁想要一些背景资料，这里是一个简短的文章解释了为什么overflow: hidden的作品。 它与所谓的块格式化上下文做。 这是W3C的规范的一部分（即，不是一个黑客）和基本上是通过用块型流动的元件所占据的区域。

它应用时，都会overflow: hidden创建一个新的块格式化的内容。 但它不能够引发这种行为的唯一属性。 引用一个演示文稿由陈素芬从悉尼Web应用程序组：

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

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

减

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

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

文章来源: CSS to stop text wrapping under image