不要使用CSS在空白处打破单词

Question

我有一个设定宽度的div。默认情况下文本被破坏的方式是空白区域。有没有办法设置我的元素的样式，以便在任何给定的字符处打破文本以填充可用的最大空间？

提前致谢！

Answer 1

CSS中的分词属性可用于在发生换行时进行更改。通常，文本中的换行符只能出现在某些空格中，例如有空格或连字符时。但是使用word-break: break-all我们可以覆盖它。

除此之外，这对于阻止长网址不会破坏文本容器非常有用。

div {
 width: 200px;
 background: pink;
}
    
p {word-break: break-all; }

<div>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis, justo quis mollis volutpat, nibh enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis, justo quis mollis volutpat, nibh enim</p>
</div>

jQuery“替代”

也可以使用包括但不限于https://github.com/bramstein/hypher的插件，并且通过使用相关词典（取决于语言）在短语中正确连字时，可能会提供更好的整体外观。