CSS line-break属性与中文标点换行
关于标点符号把文字带着换行的问题解决方案
出现的问题
最近在弄一个介绍页面的时候遇到一个很巧的问题,在文本换行的时候刚好能够放下文字,但是标点符号把这个文字带着换行了
如下图所示:
文章图片
如果的在上一行显示,那么句号就应该在下一行显示,然而句号是避首标点,不能出现在开头。因此,“的”字就被带到下一行了
中文标点的这种换行特性,即使设置word-break:break-all
也是无效的,此时需要用到的CSS属性是line-break
。
line-break属性简介
【CSS 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,可能是 "-") |
line-break: anywhere;
就好了.class {
line-break: anywhere;
}
效果如下:
文章图片
原文地址:https://kspf.xyz/archives/33/
推荐阅读
- 第6.2章(设置属性)
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- 缓存有关的配置和属性
- 3.css浮动
- 狗趣
- Spring源码解析_属性赋值
- HTML5新增选择器属性方法
- Arcgis根据经纬度批量提取属性值
- SpringBoot|SpringBoot 属性配置中获取值的方式