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

出现的问题

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

如下图所示:

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

中文标点的这种换行特性,即使设置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/

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. Downie for Mac最强视频下载工具(支持B站优酷土豆腾讯等)

    我搜集到的一款简单拖放链接到Downie,它就会下载该网站上的视频.理论可以下载各种视频网站上的视频! 应用介绍 Downie 是一款Mac平台上的优秀视频下载软件,使用非常简单,只需将下载链接放置D ...

  2. React报错之Rendered more hooks than during the previous render

    正文从这开始~ 总览 当我们有条件地调用一个钩子或在所有钩子运行之前提前返回时,会产生"Rendered more hooks than during the previous render ...

  3. Order Siblings by 排序

    在层次查询中,如果想让"亲兄弟"按规矩进行升序排序就需要使用ORDER SIBLINGS BY 这个特定的排序语句,若要降序输出可以在其后添加DESC关键字. 通过这个实验给大家展 ...

  4. winform,获取http服务状态

    /// <summary> /// 获取http服务状态 /// </summary> /// <returns></returns> protecte ...

  5. 我的Vue之旅、02 ES6基础、模块、路径、IO

    自定义模块 为什么要模块?模块化源代码能给我们带来什么好处? 试想一个巨无霸网购平台,在没有模块化的情况下,如果出现bug,程序员就要在几百万行代码里调试,导致后期维护成本上升,为了解决问题,模块化按 ...

  6. G&GH05 删除文件和.gitignore

    注意事项与声明 平台: Windows 10 作者: JamesNULLiu 邮箱: jamesnulliu@outlook.com 博客: https://www.cnblogs.com/james ...

  7. dotnet 为大型应用接入 ApplicationStartupManager 启动流程框架

    对于大型的应用软件,特别是客户端应用软件,应用启动过程中,需要执行大量的逻辑,包括各个模块的初始化和注册等等逻辑.大型应用软件的启动过程都是非常复杂的,而客户端应用软件是对应用的启动性能有所要求的,不 ...

  8. 第六章:Django 综合篇 - 12:聚合内容 RSS/Atom

    Django提供了一个高层次的聚合内容框架,让我们创建RSS/Atom变得简单,你需要做的只是编写一个简单的Python类. 一.范例 要创建一个feed,只需要编写一个Feed类,然后设置一条指向F ...

  9. 云服务器 Centos7 部署 Elasticsearch 8.0 + Kibana 8.0 指南

    文章转载自:https://mp.weixin.qq.com/s/iPfh9Mkwxf5lieiqt6ltxQ 服务器是命令行模式登录,没法以浏览器方式访问.而官方推荐的快捷部署方式,在kibana ...

  10. ECON 模式

    ECON模式通过调节发动机和空调系统的性能,有效提高燃油经济性. 在D行驶档的时候开启