CSS线缠绕

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>