CSS line-break屬性與中文標點換行

開水泡飯的博客 2021-08-16 00:55:13 阅读数:327

本文一共[544]字,预计阅读时长:1分钟~
css line-break line break 中文

關於標點符號把文字帶著換行的問題解决方案

出現的問題

最近在弄一個介紹頁面的時候遇到一個很巧的問題,在文本換行的時候剛好能够放下文字,但是標點符號把這個文字帶著換行了

如下圖所示:

例子

如果的在上一行顯示,那麼句號就應該在下一行顯示,然而句號是避首標點,不能出現在開頭。因此,“的”字就被帶到下一行了

中文標點的這種換行特性,即使設置word-break:break-all也是無效的,此時需要用到的CSS屬性是line-break

line-break屬性簡介

line-break屬性主要用中日韓3種語言中,其中以中文和日文為主

語法如下:

.class {
/* Keyword values */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;
/* Global values */
line-break: inherit;
line-break: initial;
line-break: unset;
}

特性:

初始值 auto
適用元素 所有元素
是否是繼承屬性
計算值 as specified
Animation type discrete

語法

介紹
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,可能是 "-")

最後

這裏我們只需要在css中加上 line-break: anywhere; 就好了

.class {
line-break: anywhere;
}

效果如下:
效果

原文地址:https://kspf.xyz/archives/33/

版权声明:本文为[開水泡飯的博客]所创,转载请带上原文链接,感谢。 https://gsmany.com/2021/08/20210816005446696a.html