CSS line-break属性与中文标点换行

关于标点符号把文字带着换行的问题解决方案

出现的问题

最近在弄一个介绍页面的时候遇到一个很巧的问题,在文本换行的时候刚好能够放下文字,但是标点符号把这个文字带着换行了

如下图所示:

CSS 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;
}

效果如下:
CSS line-break属性与中文标点换行

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

CSS line-break属性与中文标点换行

上一篇:Web服务器


下一篇:国家发改委公示了38个大数据发展重大工程拟支持项目