Question

给定一个块容器

<div>
 this is a very long string which contains a bunch of characters that I want to break at container edges.
</div>

是否有任何css属性我可以设置为在它到达容器宽度时强制它破坏，无论字符串的内容如何，例如像：

之类的中断

this is a ve
ry long stri
ng which ...

几乎是我想要的。现在，似乎总是喜欢打破空白字符或其他特殊字符（例如/).

Answer 1

有一个名为word-break的CSS3属性，将来可能对你有用。

此处提供了更多信息：http://www.css3.com/css-word-break/

break-all值看起来像你要求的那样：

在内容包含大部分亚洲字符集内容的情况下很有用，此值的行为类似于“正常”。非亚洲字符集内容可以跨行任意划分。

对于更多受支持的CSS版本，我认为没有办法可以做到这一点。

Answer 2

试试这个

<style type="text/css">
div {
white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
white-space: -pre-wrap; /* Opera 4 - 6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
word-wrap: break-word; /* IE 5.5+ */
}
</style>

<div style="width:200px">
adsjflk;asjfl;kasdjfl;kasdjfl;kasdjf;lkasdjf;lkasdjf;lkasjdf;lkajsd;lkadfjs;l
</div>

Answer 3

替代方法通过将div包含在父div中并设置父div的宽度来实现相同的目的。虽然它可能不是理想的解决方案。

<div style="width:50px">
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
        </div>

CSS换行

3 个答案: