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;
}