CSS，在一定数量的符号后注入换行符

Question

我在容器里面有一些文字。 容器可以是div ， td甚至是p ，在浏览器中可能看起来像这样：

Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

是否可以在特定数量的字符后纯粹通过CSS注入换行符。 例如，如果我们应该在10个符号后注入，它应该如下所示：

Lorem ipsu
m dolor si
t amet, co
nsectetur 
adipiscing
 elit, sed
 do eiusmo
d tempor i
ncididunt 
ut labore 
et dolore 
magna aliq
ua.

是否有可能纯粹通过CSS，没有任何JavaScript？

Answer 1

一种方法是考虑等宽字体，其中所有字符的宽度相同，因此您可以根据此宽度修复容器的宽度，并以视觉方式获得您想要的内容：

 .box { font-family: "Inconsolata", monospace; width: 10ch; word-break: break-all; border:1px solid; } 

 <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet"> <div class="box"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div class="box" style="font-size:20px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> 

Answer 2

你可以给容器一个固定的宽度并使用word-break:break-all ：

 .test { width: 75px; word-break: break-all; } 

 <div class="test"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> 

Answer 3

我会设置

p, td, div {
word-break: break-all
}

并以em为单位定义宽度。 我不知道这是否完全符合您的要求，但应该对您有所帮助。

Answer 4

你不能。 最新的解决方案是在char中设置父容器宽度：

div {
 width: 10em;
}