CSS CSS停止图像下的文本换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11411219/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS to stop text wrapping under image
提问by Nick
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.
我想要这样，如果文本换行，它不会进入图像的“列”。我知道我可以用table（我正在做的）来做到这一点，但由于这个原因，这是行不通的。
I've tried the following without success:
我尝试了以下但没有成功：
li span {width: 100px; margin-left: 20px}
.fav_star {width: 20px}
I also tried float: right.
我也试过了float: right。
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.
采纳答案by Dan
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 solutionwhich is posted as another answer on this question.
由于这个问题获得了很多观点并且这是公认的答案，我觉得有必要添加以下免责声明：
这个答案特定于 OP 的问题（在示例中设置了宽度）。虽然它有效，但它要求您在每个元素、图像和段落上都有一个宽度。除非这是您的要求，否则我建议使用Joe Conlin 的解决方案，该解决方案作为此问题的另一个答案发布。
The spanelement 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 添加到您的跨度，以便您能够更改其宽度。
display: block;
Another way, which usually makes more sense, is to use a <p>element as a parent for your <span>.
另一种通常更有意义的方法是使用<p>元素作为<span>.
<li id="CN2787">
<img class="fav_star" src="images/fav.png">
<p>
<span>Text, text and more text</span>
</p>
</li>
Since <p>is a blockelement, you can set its width using CSS, without having to change anything.
由于<p>是一个block元素，您可以使用 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:lefton the image, you can also put float:righton li pbut in that case, you will also need text-align:leftto realign the text correctly.
PS 除了float:left在图像上，您也可以穿上float:right，li p但在这种情况下，您还需要text-align:left正确重新对齐文本。
P.S.S. If you went ahead with the first solution of not adding a <p>element, your CSS should look like so:
PSS 如果您继续使用不添加<p>元素的第一个解决方案，您的 CSS 应该如下所示：
li span{width: 100px; margin-left: 20px;display:block}
.fav_star {width: 20px;float:left}
回答by Joe Conlin
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/
回答by hqcasanova
For those who want some background info, here's a short articleexplaining why overflow: hiddenworks. 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.
对于那些想要一些背景信息的人，这里有一篇简短的文章解释了为什么overflow: hidden有效。它与所谓的块格式化上下文有关。这是 W3C 规范的一部分（即不是 hack）并且基本上是由具有块类型流的元素占据的区域。
Every time it is applied, overflow: hiddencreates a newblock formatting context. But it's not the only property capable of triggering that behaviour. Quoting a presentationby Fiona Chan from Sydney Web Apps Group:
每次应用时，overflow: hidden都会创建一个新的块格式上下文。但这并不是能够触发这种行为的唯一属性。引用来自 Sydney Web Apps Group 的 Fiona Chan的演讲：
- float: left / right
- overflow: hidden / auto / scroll
- display: table-cell and any table-related values / inline-block
- position: absolute / fixed
- 浮动：左/右
- 溢出：隐藏/自动/滚动
- 显示：表格单元格和任何与表格相关的值/内联块
- 位置：绝对/固定
回答by Gareth
If you want the margin-leftto work on a spanelement you'll need to make it display: inline-blockor display:blockas well.
如果你想margin-left在一个span元素上工作，你需要制作它display: inline-block或者也display:block一样。
回答by Mamrez
setting display:flexfor the text worked for me.
display:flex文本的设置对我有用。
回答by hawkeye126
Wrap a div around the image and the span and add the following to CSS like so:
在图像和跨度周围包裹一个 div 并将以下内容添加到 CSS 中，如下所示：
HTML
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
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%;
}
}
