CSS停止图像下的文本包装

I have the following markup:

我有以下标记:

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

I want it so that if the text wraps, it doesn't go into the 'column' for the image. I know I can do it with a table (which I was doing) but this is not workable for this reason.

我想要它，如果文本包装，它不会进入“列”的图像。我知道我可以用一个表格(我正在做)来做，但是出于这个原因，这是行不通的。

I've tried the following without success:

我试过以下方法，但没有成功:

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

I also tried float: right.

我也尝试了float:对。

Thanks.

谢谢。

EDIT: I want it to look like this:

编辑:我想让它看起来像这样:

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

Not like this:

不是这样的:

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

6 个解决方案

#1

Since this question is gaining lots of views and this was the accepted answer, I felt the need to add the following disclaimer:

This answer was specific to the OP's question (Which had the width set in the examples). While it works, it requires you to have a width on each of the elements, the image and the paragraph. Unless that is your requirement, I recommend using Joe Conlin's solution which is posted as another answer on this question.

这个答案是特定于OP的问题(示例中设置了宽度)。当它工作时，它要求您在每个元素、图像和段落上都有一个宽度。除非这是你的要求，否则我建议使用乔·康林的解决方案，该方案作为这个问题的另一个答案发布。

The span element is an inline element, you can't change its width in CSS.

span元素是一个内联元素，在CSS中不能改变它的宽度。

You can add the following CSS to your span so you will be able to change its width.

您可以将以下CSS添加到您的span中，以便您能够更改它的宽度。

display: block;

Another way, which usually makes more sense, is to use a  element as a parent for your .

另一种方法(通常更有意义)是使用

元素作为的父元素。

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

Since  is a block element, you can set its width using CSS, without having to change anything.

由于

是块元素，您可以使用CSS设置它的宽度，而不需要更改任何内容。

But in both cases, since you have a block element now, you will need to float the image so that your text doesn't all go below your image.

但是在这两种情况下，由于现在已经有了块元素，所以您需要浮动图像，这样您的文本就不会全部显示在图像下面。

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

P.S. Instead of float:left on the image, you can also put float:right on li p but in that case, you will also need text-align:left to realign the text correctly.

在图片左边，你也可以把float放在li p的右边，但是在这种情况下，你还需要文本对齐:左对齐以正确地重新对齐文本。

P.S.S. If you went ahead with the first solution of not adding a  element, your CSS should look like so:

P.S.S.如果你采用不添加

元素的第一个解决方案，你的CSS应该是这样的:

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

#2

223

Very simple answer for this problem that seems to catch a lot of people:

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

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

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

See example: http://jsfiddle.net/vandigroup/upKGe/132/

看到示例:http://jsfiddle.net/vandigroup/upKGe/132/

#3

For those who want some background info, here's a short article explaining why overflow: hidden works. It has to do with the so-called block formatting context. This is part of W3C's spec (ie is not a hack) and is basically the region occupied by an element with a block-type flow.

对于那些需要一些背景信息的人，这里有一篇短文解释为什么溢出:隐藏的作品。它与所谓的块格式化上下文有关。这是W3C规范的一部分(即不是hack)，基本上是块类型流的元素所占用的区域。

Every time it is applied, overflow: hidden creates a new block formatting context. But it's not the only property capable of triggering that behaviour. Quoting a presentation by Fiona Chan from Sydney Web Apps Group:

每次应用它时，overflow: hidden都会创建一个新的块格式化上下文。但这并不是唯一能引发这种行为的财产。引用来自悉尼网络应用集团的菲奥娜·陈的演讲:

float: left / right

浮:左/右

overflow: hidden / auto / scroll

溢出:隐藏/自动/滚动。

display: table-cell and any table-related values / inline-block

显示:表单元格和任何表相关的值/内联块

position: absolute / fixed

位置:绝对的/固定

#4

If you want the margin-left to work on a span element you'll need to make it display: inline-block or display:block as well.

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

#5

setting display:flexfor the text worked for me.

设置显示:flexfor文本为我工作。

#6

Wrap a div around the image and the span and add the following to CSS like so:

在图像和跨度周围包装一个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%;
            }
        }

#1

Since this question is gaining lots of views and this was the accepted answer, I felt the need to add the following disclaimer:

This answer was specific to the OP's question (Which had the width set in the examples). While it works, it requires you to have a width on each of the elements, the image and the paragraph. Unless that is your requirement, I recommend using Joe Conlin's solution which is posted as another answer on this question.

这个答案是特定于OP的问题(示例中设置了宽度)。当它工作时，它要求您在每个元素、图像和段落上都有一个宽度。除非这是你的要求，否则我建议使用乔·康林的解决方案，该方案作为这个问题的另一个答案发布。