Nic*_*ick 78 css css3 word-wrap css-float
我有以下标记:
<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.
Joe*_*lin 241
这个问题的答案非常简单,似乎抓住了很多人:
<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/
Dan*_*Dan 31
由于这个问题获得了很多意见,这是公认的答案,我觉得有必要添加以下免责声明:
这个答案特定于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设置其宽度,而无需更改任何内容.
但在这两种情况下,由于您现在有一个块元素,因此您需要浮动图像,以使文本不会全部位于图像下方.
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}