当前位置:

css 标点符号换行问题

访客 2024-04-24 1463 0

最近在做项目过程中遇到一个很奇怪的问题,在文本换行的时候刚好能够放下文字,但是标点符号把这个文字带着换行了。经过研究发现,因为标点符号不允许出现在行首和行尾,连带着符号前的一个文字也换行了。

解决方案:使用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,可能是“-”)。

发表评论

  • 评论列表
还没有人评论,快来抢沙发吧~