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

出现的问题

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

如下图所示:

如果的在上一行显示,那么句号就应该在下一行显示,然而句号是避首标点,不能出现在开头。因此,“的”字就被带到下一行了

中文标点的这种换行特性,即使设置word-break:break-all也是无效的,此时需要用到的CSS属性是line-break

line-break属性简介

line-break属性主要用中日韩3种语言中,其中以中文和日文为主

语法如下:

  1. .class {
  2. /* Keyword values */
  3. line-break: auto;
  4. line-break: loose;
  5. line-break: normal;
  6. line-break: strict;
  7. line-break: anywhere;
  8. /* Global values */
  9. line-break: inherit;
  10. line-break: initial;
  11. line-break: unset;
  12. }

特性:

初始值 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; 就好了

  1. .class {
  2. line-break: anywhere;
  3. }

效果如下:

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

CSS line-break属性与中文标点换行的更多相关文章

  1. 转css中文英文换行、禁止换行、显示省略号

    css中文英文换行.禁止换行.显示省略号 原创 2016年08月09日 14:20:01   word-break:break-all;只对英文起作用,以字母作为换行依据 word-wrap:brea ...

  2. Android的TextView在显示文字的时候,如果有段中文有英文,有中文,有中文标点符号,你会发现,当要换行的时候遇到中文标点, 这一行就会空出很多空格出来

    一.问题描述: Android的TextView在显示文字的时候,如果有段中文有英文,有中文,有中文标点符号,你会发现,当要换行的时候遇到中文标点, 这一行就会空出很多空格出来.原因是: 1) Tex ...

  3. css 文本外观属性(text) 和 字体样式属性(font)

    css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距 对中文无效 line ...

  4. [转] CSS float 浮动属性

    http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...

  5. css常用文本属性

    [CSS常用文本属性] 1. 字体.字号类: ① font-weight: 字体粗细. bold-加粗.normal-正常.lighter-细体 也可以使用100-900数值,400表示normal, ...

  6. CSS的常用属性

    刚开始学习前段的我,还处于初级阶段,一些东西还是会有搞不明白的时候,还是要大家多多理解.今说就一些关于CSS的常用属性吧! 一.CSS常用选择器 CSS选择器应该说是一个非常重要的工具吧,选择器用得好 ...

  7. 【转载】CSS font关键字属性值的简单研究

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...

  8. CSS字体样式属性

    font-size 字号大小 一般推荐使用相对长度(px ,em),不推荐使用绝对长度(in,cmm,mm,pt) font-family 字体 1.可以同时指定多个字体,中间用英文状态的逗号隔开,英 ...

  9. css常用样式属性详细介绍

    对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...

随机推荐

  1. 用Socket套接字发送和接收文件(中间用数组存取)

    创建服务端: public class TcpFileServer { public static void main(String[] args) throws Exception { //1创建S ...

  2. 检查原生 JavaScript 函数是否被覆盖

    你如何确定一个JavaScript原生函数是否被覆盖? 你不能--或者至少无法可靠地确定.有一些检测方法很接近,但你不能完全相信它们. JavaScript原生函数 在JavaScript中,原生函数 ...

  3. identity4 系列————纯js客户端案例篇[四]

    前言 前面已经解释了两个案例了,通信原理其实已经很清楚了,那么纯js客户端是怎么处理的呢? 正文 直接贴例子哈. https://github.com/IdentityServer/IdentityS ...

  4. 066_末晨曦Vue技术_过渡 & 动画之多个元素的过渡

    多个元素的过渡 点击打开视频讲解更加详细 我们之后讨论多个组件的过渡,对于原生标签可以使用 v-if/v-else.最常见的多标签过渡是一个列表和描述这个列表为空消息的元素: <transiti ...

  5. torch.max与torch.argmax

    形式: torch.max(input) → Tensor 返回输入tensor中所有元素的最大值: a = torch.randn(1, 3) >>0.4729 -0.2266 -0.2 ...

  6. [Python]-字典-实践经验总结

    字典是Python中常用的一个数据类型. 与列表有相似的用法,表现在列表的下标和字典的键值可以通过相似的方式读取数据: list_name[0] = value dict_name['key'] = ...

  7. Web 开发相关概念

    Web 开发相关概念 前端 后端 全栈 前端 Front-end:网站中用户看到的部分 HTML CSS JavaScript 库和框架 设计工具 后端 Back-end:网站中用户看不到的部分 编程 ...

  8. Html飞机大战(十七): 优化移动端

    好家伙,继续优化,   好家伙,我把我的飞机大战发给我的小伙伴们玩 期待着略微的赞赏之词,然后他们用手机打开我的给他们的网址 然后点一下飞机就炸了. 游戏体验零分 (鼠标点击在移动端依旧可以生效) 好 ...

  9. Python实验报告——第3章 流程控制语句

    实验报告 [实验目的] 1.掌握python中流程控制语句的使用,并能够应用到实际开发中. [实验条件] 1.PC机或者远程编程环境 [实验内容] 1.完成第三章流程控制语句实例01-09,实战一到实 ...

  10. Elasticsearch:Cluster备份 Snapshot及Restore API

    Elasticsearch提供了replica解决方案,它可以帮我们解决了如果有一个或多个node失败了,那么我们的数据还是可以保证完整的情况,并且搜索还可以继续进行.但是,有一种情况是我们的所有的n ...