彻底搞懂CSS文本、空白换行问题
首先,我们来整理一下与换行有关的3个CSS属性:
word-break
该属性决定文本内容超出容器时,浏览器是否自动插入换行符。
属性值:
- normal:默认换行规则——英文以词为单位换行,连续字符不换行,直接溢出父元素
- break-all:无视单词,强制在父元素边缘位置截断(最省空间,看起来最整齐,但单词可能被从中劈开)。另外连续的标点符号不会换行,不知为何。。。
- keep-all:与normal一样,而且连中日韩的连续文字也不换行了(有空格分隔时会换行)
- *break-word:这不是一个规范属性,只有部分浏览器支持,效果同word-wrap: break-word;
word-wrap(overflow-wrap)
该属性决定浏览器是否应该在一个无法正常断开的单词内部插入换行符。
属性值:
- normal:不在单词内部插入换行符,即换行只发生在单词间的空格等地方,不会截断单词。如果单词超级长,则溢出父容器。
- break-word:『如果没有合适的截断点,那就可能在任意位置截断单词』。解释一下:首先尝试正常换行(这一行放不下就放到下一行),如果换行后还是很长,就在任意位置截断。注:连续的标点符号也会截断。
white-space
该属性决定浏览器如何处理空白和换行符。
属性值:
- normal:默认行为,换行符转换为空白,合并连续的空白,但必要时换行(所谓『必要』对于英文来说,指的是一个单词后面的下一个单词在该行末尾放不下了,得整个放到下一行去;对中文来说就是自然的换行)
- nowrap:其他与normal一样,但『必要』的换行也不做了,打死不换行
- pre:保留连续的空白,遇到换行符或br标签时换行,但不自动插入换行符
- pre-wrap:保留连续的空白,在遇到换行符、<br>时换行,『必要』时自动插入换行符
- pre-line:合并连续的空白符,在遇到换行符、<br>时换行,『必要』时自动插入换行符
对这3个属性的关系,我的理解如下:
首先,white-space决定了浏览器如何渲染换行符,如果它选择无视换行符,那么另外两个属性指导浏览器自动插入的换行符都无效;而它自己插入的换行符不受影响。
其次,word-break优先于word-wrap,因为浏览器首先会把单词视为一个整体。举个例子:
word-break值为normal或keep-all时,可能会有超长的单词溢出容器。此时 word-wrap:break-word 会处理这种情况,将该单词从中间截断,浏览器最终表现出来的效果是break-word。
而若word-break值改成了break-all,那么超长的单词会被强制截断,此时word-wrap就没有用武之地了。浏览器最终表现出来的效果是break-all。
(PS:如果同时设了break-all和break-word,那么一长串标点符号不会换行,原因不详。。。为了长串标点能正常换行,建议只使用break-word)
因此,如果需求是这样的(一般是UGC文本的展示):
1. 换行符、空白都原样显示
2. 文本正常换行,不能溢出容器
那么需要设置的属性组合为:
.text {
white-space: pre-wrap;
word-wrap: break-word;
}
参考资料:
你真的了解word-wrap和word-break的区别吗?
white-space、word-wrap和word-break的简单整理
彻底搞懂CSS文本、空白换行问题的更多相关文章
- css文本是否换行
关于文本换行有三个属性: white-space word-break word-wrap white-space normal 默认.空白会被浏览器忽略 pre 空白会被浏览器保留.其行为方式类似 ...
- 彻底搞懂CSS伪类选择器:is、not
本文介绍一下Css伪类:is和:not,并解释一下is.not.matches.any之前的关系 :not The :not() CSS pseudo-class represents element ...
- 彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index
前言 最近,在项目中遇到一个关于CSS中元素z-index属性的问题,具体问题不太好描述,总结起来就是当给元素和父元素色设置position属性和z-index相关属性后,页面上渲染的元素层级结果和我 ...
- CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ ...
- 用css实现文本不换行切超出限制时显示省略号(小tips)
div{ max-width: 500px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;/*文本不换行*/ } 如上 ...
- CSS实现不换行/自动换行/文本超出隐藏显示省略号
在写页面的时候,我们经常会需要用到关于文本的换行,强制换行以及显示几行超过显示省略号等,今天我们就对这些问题来做个汇总吧! 1.自动换行 div{ word-wrap:break-word; word ...
- 第 15 章 CSS 文本样式[下]
学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一.文本总汇 本节课, ...
- 6.css文本样式
文本样式,只要针对的是文本的效果和文本的方位,即文本样式和文本控制总结起来有一表中的属性可用: 属性名 说明 CSS 版本 text-decoration 装饰文本出现各种划线 1 text-tran ...
- CSS文本与文字
-255之间 14.2 CSS中的文字属性 属性名称 属性值 说明 font-style norma ...
随机推荐
- project2
[概念] 要好好理解并且背下来记住 Java基础,呵呵呵.自己查吧. local host搞错了,整个跑不出来.真尴尬.不理解啊. static原来是全局的意思啊,好吧.以前都忘了,这次该记住了.st ...
- django执行原生sql
一.ORM row()方法:只能实现查询 d_list = models.Article.objects.raw( 'select nid, count(nid) as num,strftime(&q ...
- Spring常用注解总结(2)
@Autowired "自动填装",作用是为了消除代码JAVA代码里面的getter/setter与bean属性中的property. @Autowired默认按类型匹配的方式,在 ...
- vue2 -- axios
4. 通过axios实现数据请求 vue.js默认没有提供ajax功能的. 所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互. 注意,axios本质上就是java ...
- UML图之时序图
时序图(Sequence Diagram)是显示对象之间交互的图,这些对象是按时间顺序排列的.顺序图中显示的是参与交互的对象及其对象之间消息交互的顺序.时序图中包括的建模元素主要有:角色(Actor) ...
- 在MyEclipse中搭建spring-boot+mybatis+freemarker框架
一.创建项目 1.右键-->New-->Project... 2.选中Maven Project,点击next 3.选中第一个 4.添写Group Id,Artifact Id,选择Com ...
- Subplot 分格显示
1.subplot2grid 使用import导入matplotlib.pyplot模块, 并简写成plt. 使用plt.figure()创建一个图像窗口 import matplotlib.pypl ...
- IP报文头详解
IPv4报头: 报头长度:20-60字节bytes 白色部分为固定头部部分(20 bytes),绿色option选项部分为可选部分. 固定头部大小计算: 4bit + 4bit + 8bit + 16 ...
- 29. pt-table-usage
pt-table-usage --query="select * from t01 join t02 on t01.id=t02.id where t01.code=2" pt-t ...
- IDEA快捷键 日常整理
F9 : debug Ctrl+” +/- ” : 当前方法展开.折叠 Ctrl+Shift+”+/-” : 全部展开.折叠 Alt+1 : 工程面板 Alt+4:控制台 Alt+7:查看本类方法 S ...