css 文字打断换行（word-break）
2019-08-20 本文已影响0人
LilyLaw
最近越发觉得基本功不可废，所以今天深度剖析一下css文字换行。
先看下面这段代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 300px;
height: 200px;
background: lightgreen;
}
</style>
</head>
<body>
<div class="box">
The furthest distance in the world,Is not between life and death,But when I stand in front of you,Yet you don’t know that I love you.ThefurthestdistanceintheworldIsotwhenistand in front of you Yet you can’t see my love But when undoubtedly knowing the love from both
</div>
</body>
</html>
在浏览器效果如下
文字效果
我故意拼了一个长单词(字符之间无空白符)，发现没换行，然后溢出。
这种效果显然不行，如果需要所有文字都在div内部，那么势必需要将文字内容打断，但是具体该怎么打断呢？？？
word-break
在此引入word-break属性，该属性指定如何在单词内断行。
一般有两种断行方式，可根据需求选择：
| 属性值 | 效果描述 | 效果展示 |
|---|---|---|
| break-all | 对于非中文非韩文非日文的文字，可任意位置断行 |
image.png
|
| break-word(非标准属性) | 对于非中文非韩文非日文的文字，可隔断单词断行 |
image.png
|
一般只要如上设置即可断行。
补充一个小属性
注： word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为
overflow-wrap。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。
前面我们提到，word-break 没有 将 break-word 作为标准属性。作为补充，word-wrap: break-word 的效果与word-break: break-word 的效果一致，可以作为替代品。
