最近在做项目过程中遇到一个很奇怪的问题,在文本换行的时候刚好能够放下文字,但是标点符号把这个文字带着换行了。经过研究发现,因为标点符号不允许出现在行首和行尾,连带着符号前的一个文字也换行了。
解决方案:使用 line-break
属性(之前从未使用过)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
border: 1px solid red;
width: 100px;
height: 300px;
word-break: break-all;
line-break: anywhere;
}
</style>
</head>
<body>
<div class="box">
组织管理最重要的是“集体决策,个人负责”。然而在日常管理中,最常见的现象是“个人决策,集体负责”。
</div>
</body>
</html>
line-break
可以用来处理如何断开(break lines)带有标点符号的中文、日文或韩文(CJK)文本的行。
属性 | 描述 |
---|---|
auto | 使用默认的断行规则分解文本。 |
loose | 使用尽可能松散(least restrictive)的断行规则分解文本。一般用于短行的情况,如报纸。 |
normal | 使用最一般(common)的断行规则分解文本。 |
strict | 使用最严格(stringent)的断行原则分解文本。 |
anywhere | 在每个印刷字符单元(typographic character unit)的周围,都有一个自动换行(soft wrap)的机会,包括任何标点符号(punctuation character)或是保留的空白字符(preserved white spaces),或是单词之间。但忽略任何用于阻止换行的字符,即使是来自 GL、WJ 或 ZWJ 字符集的字符,或是由 word-break 属性强制的字符。不同的换行机会拥有相同的优先级。也不应用断字符(hyphenation,可能是 “-”)。 |