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

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

4 个答案: