Question

我有这段代码：

<ul>
 <li> Something <span> Long Long Long Long Long Long Long Text </span></li>
 <li> Something <span> Long Long Long Long Long Long Long Text </span></li>
</ul>

和css：

ul {
 list-style-type: none;
 margin:0;
 width: 340px;
}

ul li {
 padding: 16px 0 16px 0; 
 border-bottom: 1px solid black;
}

ul li span {
 display: inline;
 float:right;
}

问题是如果span内的文字太长，它会向下推并打破布局。如何使span文本有自己的宽度并在超出自己的宽度时分成行而不破坏布局？

Answer 1

如果您希望打破单词，可以使用：

li {
    word-wrap: break-word;
}

但是，如果你的文字旁边有问题，例如您想要的图标：

[Icon] My Long Text Is Here
       Which needs to be like so
       if there is long lines

而不是：

[Icon] My Long Text Is Here
Which needs to be like so if
there is long lines

你可以这样做：

div.icon { float: left; margin-right: 10px; }
div.text { overflow: hidden; }

使用此标记：

<div class="box-wrapper">
    <div class="icon">Icon</div>
    <div class="text">My Long Text Is Here Which needs to be like so if there is long lines</div>
</div>

Answer 2

以下内容将为您提供最佳的浏览器兼容性：

word-wrap: break-word;
overflow-wrap: break-word;

如果没有拆分文本的好地方，

overflow-wrap: break-word会在字符之间添加间隔。 word-wrap: break-word用于IE和Firefox

您的CSS可以修改如下：

ul {
 list-style-type: none;
 margin: 0;
 width: 340px;
}

ul li {
 padding: 16px 0 16px 0; 
 border-bottom: 1px solid black;
}

ul li span {
 word-wrap: break-word;
 overflow-wrap: break-word;
}

这里有一个更人为的例子：http://jsfiddle.net/ojaemd8n/4/

Answer 3

将您的范围规则更改为此

ul li span {
display: inline-block;
vertical-align:midle;
width:120px; /*Specify the width of block*/
word-break: break-word;
}

我怎么能打破这篇长文？

3 个答案: