停止文字在图片下方换行的CSS

Question

我有以下标记：

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

- Nick

---

你能把你的代码放到JSFiddle上吗？ - Hardik

对于路人甲，您不需要像被接受的答案建议的那样处理宽度。这更简单：创建所谓的新格式化上下文。请参见Joe Conlin的答案。有关更多背景信息，请参见我的回答。 - HQCasanova

@hqcasanova 仅供参考，丹的答案在乔发布他的答案之前9个月被接受，而在你发布你的答案之前16个月被接受。虽然感谢你提供了其他选择，但我不会取消对丹的答案的接受。 - Nick

@Nick 我甚至不知道你可以取消接受一个答案。就记录而言，那并不是我的意图，因为我认为用“对于路人甲”表达得很清楚了。无论如何，还是感谢你的评论。 - HQCasanova

别担心，@hqcasanova。 - Nick

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/

- Joe Conlin

---

这是针对这个问题的正确答案。这种技术不需要为段落设置固定宽度，更加简单易行。即使在IE8中也能完美运行。 - chocolata

实际上，如果包含文本的元素是span（原作者的情况），这种方法是行不通的。需要使用display: block来改变span的默认行内布局。但是，除此之外，我赞同这个更优雅的解决方案。如果有人想知道overflow: hidden背后的魔法，请参见我的下面的回答。 - HQCasanova

这不是我所期望的行为，但这太棒了。 - Gavin

记录一下，这个答案是在我选择的那个答案之后8个月才出现的 :) - Nick

哇，完美地工作了。我简直不敢相信我以前从未知道这个。 - SFlagg

Answer 2

因为这个问题得到了很多关注，并且这是被接受的答案，我觉得需要添加以下免责声明：

此答案仅适用于提问者的问题（其中示例中已设置宽度）。虽然这个答案可行，但需要您在每个元素（图像和段落）上都设置宽度。除非这符合您的需求，否则我建议使用Joe Conlin 的解决方案，该方案作为此问题的另一个答案发布。

span 元素是一个内联元素，在 CSS 中无法更改其宽度。

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

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>是一个块级元素，您可以使用CSS设置其宽度，而无需更改任何内容。

但在这两种情况下，由于现在有了块级元素，您需要浮动图像，以便文本不会全部放在图像下面。

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

附注：图片上不需使用float:left，你也可以在li p上使用float:right，但这种情况下，你还需要使用text-align:left来正确对齐文本。

另外，如果你选择第一种解决方案而不添加<p>元素，则你的CSS应如下所示：

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

- Dan

---

这真的很有帮助。我把span改成了一个p元素。然后只需要这两个就可以了：li p {margin-left: 40px} .fav_star {float: left}。图片的宽度由图片本身设置，p元素自动变成block，我没有改变宽度。感谢您的帮助。 - Nick

如果你要使用 display:block，那么你最好使用 div，因为这就是它的作用（或者像你建议的那样使用 p）。没有必要双重包装文本 - 如果你使用 p，你可以去掉 span。 - Gareth

在我看来，你不应该使用HTML来改变页面的设计。这是CSS的工作（当然有例外情况，特别是当你需要跨浏览器兼容性时）。我认为使用适当的HTML和具有“良好语义”的内容更重要。所以在这种情况下，我不会使用div，而是使用p更合理。对我来说，失去span有点微不足道，这取决于你如何布局你的内容。 - Dan

将<span>包装在<p>中就像霍格沃茨的巫术一样！效果非常好！ - J-a-n-u-s

Answer 3

对于那些想了解背景信息的人，这里有一篇简短文章，解释了为什么 overflow: hidden 有效。这与所谓的块格式化上下文有关。这是W3C规范的一部分（即不是黑客技巧），基本上是由具有块级流程的元素占用的区域。

每次应用 overflow: hidden 都会创建一个新的块格式化上下文。但这不是唯一能触发该行为的属性。引用Sydney Web Apps Group的Fiona Chan在演示中说：

• float: left / right
• overflow: hidden / auto / scroll
• display: table-cell 和任何表格相关值/ inline-block
• position: absolute / fixed

- HQCasanova

---

你能否在回答中添加一些文章细节，以防链接失效？ - user764357

早上好，澳大利亚！感谢您的评论。 - HQCasanova

这非常适合显示可能与附近的图片或浮动侧边栏相互竞争的代码块。 - AlexMA

最初描述的技术效果很好，尽管正如其他人所说，这不是我所期望的行为。然而，我并没有看到浮动或内联块在没有溢出的情况下起作用，当然，与表格相关的显示值和绝对或固定位置还有其他布局后果，可能在上下文中可接受或不可接受。 - enigment

Answer 4

如果您希望对 span 元素的 margin-left 起作用，您需要将其设置为 display: inline-block 或 display:block。

- Gareth

---

可能还需要在此处的图像上添加 vertical-align: top;。 - ThinkingStiff

Answer 5

对于我来说，将文本设置为display:flex很有效。

- Mamrez

---

这似乎是设置overflow:auto的更现代等效物。我确定它在所有情况下都不完全相同，但对我也起作用。 - Matt Browne

Answer 6

请将图片和span元素包裹在一个div中，并按照以下方式添加CSS：

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

- 9ete