代码之家 › 专栏 › 技术社区 › Mr.D

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

css html

Mr.D · 技术社区 · 7 年前

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?

4 回复 | 直到 7 年前

Temani Afif 7 年前

一种方法是考虑一个单字符字体,其中所有字符的宽度是相同的,这样就可以根据这个宽度来确定容器的宽度并获得。 视觉上

.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>

Pete Irfan TahirKheli 7 年前

你可以给你的容器一个固定的宽度和用途 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>