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

出现的问题

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

如下图所示:

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

中文标点的这种换行特性,即使设置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. 【建议收藏】Mac VMWare NAT模式安装 CentOS 7-操作教程

    学习大数据离不开 Linux 系统,网络上大部分文章都是在 Windows 系统下使用 VMWare Workstation 安装 CentOS ,并使用 NAT 模式配置网络.本文基于 Mac OS ...

  2. CSS 笔记目录

    布局 CSS 布局(一):Flex 布局 选择器 CSS 选择器(一):属性选择器 CSS 选择器(二):子代选择器(>)

  3. 【unity游戏入门】1 环境安装

    作者 罗芭Remoo 2021年9月24日 这一个系列随笔记录如何使用unity引擎从零开始开发游戏,软件版本均使用最新版本 有关unity的背景介绍可以通过unity官网https://unity. ...

  4. 如何使用CSS伪类选择器

    总览 CSS选择器允许你通过类型.属性.位于HTML文档中的位置来选择元素.本教程阐述了三个新选项:is().:where()和:has(). 选择器通常在样式表中使用.下面的示例会找到所有<p ...

  5. Html飞机大战(六):移动飞机

    好家伙,这篇移动主角   我们先来看看一个好东西, addEventListener() 方法 (他真的很好用)   我们直译一下,就叫他添加事件监听器方法   而可监听的对象就有很多啦 我们来了解一 ...

  6. Springboot pageHelper总结

    Springboot上使用pageHelper总结 1. 在pom.xml 中引入依赖 <!--pagehelper--> <dependency> <groupId&g ...

  7. day36-IO流03

    JavaIO流03 4.常用的类02 4.4节点流和处理流 4.4.1基本介绍 节点流可以从一个特定的数据源读写数据,如FileReader.FileWriter 数据源就是存放数据的地方,比如文件. ...

  8. 使用docker-compose方式安装redash

    转载自:https://anjia0532.github.io/2019/07/08/redash/ ## 安装必要工具 apt install -y pwgen python-pip pip ins ...

  9. Elasticsearch 主从同步之跨集群复制

    文章转载自:https://mp.weixin.qq.com/s/alHHxXont6XFm_m9PfsGfw 1.什么是跨集群复制? 跨集群复制(Cross-cluster replication, ...

  10. Elasticsearch:定制分词器(analyzer)及相关性

    转载自:https://elasticstack.blog.csdn.net/article/details/114278163 在许多的情况下,我们使用现有的分词器已经足够满足我们许多的业务需求,但 ...