1、white-space

white-space 是用来设置如何处理元素中的空白。
white-space 设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容。

1.1、属性值

normal

默认处理方式

连续的空白符会被合并，换行符会被当作空白符来处理。换行在填充时是必要。

nowrap

和 normal 一样，连续的空白符会被合并。但文本内的换行无效。

强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

连续的空白符会被保留。在遇到换行符或者<br> 元素时才会换行。

pre-wrap

连续的空白符会被保留。在遇到换行符或者<br> 元素，或者需要为了填充时才会换行。

pre-line

连续的空白符会被合并。在遇到换行符或者<br> 元素，或者需要为了填充时会换行。

break-spaces

与 pre-wrap 的行为相同，除了：

任何保留的空白序列总是占用空间，包括在行尾。
每个保留的空格字符后都存在换行机会，包括空格字符之间。
这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）。

下面的表格总结了各种 white-space 值的行为：

2、text-overflow

text-overflow 确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号或显示一个自定义字符串。

2.1、属性值

clip

此为默认值。这个关键字的意思是"在内容区域的极限处截断文本"，因此在字符的中间可能会发生截断。如果你的目标浏览器支持 text-overflow: ‘’，为了能在两个字符过渡处截断，你可以使用一个空字符串值 (‘’) 作为 text-overflow 属性的值。

ellipsis

这个关键字的意思是“用一个省略号 (‘…’)来表示被截断的文本”。这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小到连省略号都容纳不下，那么这个省略号也会被截断。

<string>

<string> 用来表示被截断的文本。字符串内容将被添加在内容区域中，所以会减少显示出的文本。如果空间太小到连省略号都容纳不下，那么这个字符串也会被截断。

注意：

一定要首先强制一行内显示，再次和 overflow 属性搭配使用

3、三部曲

  /*1. 先强制一行内显示文本*/white-space: nowrap;/*2. 超出的部分隐藏*/overflow: hidden;/*3. 文字用省略号替代超出的部分*/text-overflow: ellipsis;

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

CSS系列之溢出的文字省略号显示相关推荐

CSS基础(part18)--溢出的文字省略号显示
学习笔记,仅供参考,有错必纠参考自:pink老师课堂笔记文章目录溢出的文字省略号显示 white-space text-overflow 溢出的文字省略号显示三部曲举个例子溢出的文字省略号显 ...
【web前端】CSS高级技巧（精灵图，字体图标，CSS三角，CSS用户界面样式，文字与图片垂直对齐，溢出的文字省略号显示，常见布局技巧，CSS初始化）
使用课程是黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 目录一.精灵图 1.为什么需要精灵图 2.精灵图( sprit ...
十、CSS三行代码实现溢出的文字省略号显示（white-space: nowrap;overflow: hidden;text-overflow: ellipsis;）
4. 溢出的文字省略号显示 4.1 white-space white-space设置或检索对象内文本显示方式.通常我们使用于强制一行显示内容 white-space:normal :默认处理方式wh ...
CSS溢出的文字省略号显示
目录 1.单行文本溢出显示省略号--必须满足三个条件 2.多行文本溢出显示省略号 1.单行文本溢出显示省略号–必须满足三个条件 /* 1.先强制一行内显示文本 */white-space: nowra ...
溢出的文字省略号显示
一行文本溢出并显示 - // 1. 先强制一行内显示文本 white-space: nowrap; // 2. 超出的部分隐藏 overflow: hidden; // 3. 文字用省略号替代超出的部 ...
前端笔记（9）元素的隐藏与显示，css用户界面样式，vertical-align垂直对齐，溢出文字省略号显示，css精灵技术，过渡，焦点，滑动门，margin负值
css样式表/层叠样式表(7) 元素的隐藏与显示 (1)dispaly显示 (2)visibility可见性 (3)overflow溢出 css用户界面样式鼠标样式cursor 轮廓线outline ...
CSS常用技巧（元素显示隐藏、用户界面样式、垂直对齐、溢出文字省略号显示、精灵技术、滑动门、margin负值之美和css三角之美）
CSS常用技巧 CSS常用技巧(元素显示隐藏.用户界面样式.垂直对齐.溢出文字省略号显示.精灵技术.滑动门.margin负值之美和css三角之美) 1.元素显示隐藏 1.1display 显示(重点) ...
多行溢出文字省略号显示（HTML、CSS）
多行溢出文字省略号显示(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta cha ...
单行溢出文字省略号显示（HTML、CSS）
单行溢出文字省略号显示(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta cha ...

CSS系列之溢出的文字省略号显示

文章の目录