- 前言
CSS 语言对于文字的排版这一块的功能非常强大,例如有大量的 CSS 特性可以对字符单元的中断与换行进行精确的控制
keep-all 属性优化中文排版
word-break:normal|break-all|keep-all|break-word
不同的属性对应不同的换行规则.keep-all可以让 CJK 文本不换行排版又不影响非 CJK 文本的排版行为.中文虽然是一个字拼接请来的,但是有些文字效果是固定的,不建议分开.比如下面这个例子
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#wordbreak {
width: 300px;
height: 400px;
}
.keep-all {
/* word-break: keep-all; */
}
</style>
</head>
<body>
<div id="wordbreak">
<table>
<tr>
<th>会议事假</th>
<th>会议地点</th>
<th>会议人员(3)</th>
<th>会议内容</th>
</tr>
<tr>
<td class="keep-all">2021年2月28日</td>
<td>6号楼`会议室</td>
<td class="keep-all">张三 李四 王二麻子</td>
<td>讨论字符单元的中断与换行哒哒哒哒哒哒多多多 反反复复付付付付付付付付付付付付发发发发发发付付付付</td>
</tr>
</table>
</div>
</body>
</html>
如果不想分开,则需要使用 keep-all属性设置为不分开
word-break: keep-all;
虽然 keep-all可以对文字不分开,当时对于一些连续的特殊符号,比如(________)这些符号,不能有效的断开,这时候需要使用 line-break
line-break属性和 break-all存在的问题
在开发项目中主要使用 break-all来断标点符号的,如果碰到例如(_________)则需要使用 line-break:anywhere 来进行换行
网友评论