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