溢出文本用省略号表示

最新推荐文章于 2021-10-12 18:47:29 发布

牛家军

最新推荐文章于 2021-10-12 18:47:29 发布

阅读量629

点赞数

分类专栏：前端CSS样式文章标签： css

本文链接：https://blog.csdn.net/weixin_48196335/article/details/107822160

版权

前端CSS样式专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实现文本溢出用“…”来显示

说明：

在工作中正好，需要实现一个溢出出现省略的效果，所于是上网查了一些资料，由于这不是单一一个属性就能实现的，需要多属性配合使用，所以就写一篇学习记录的博客，方便之后自己学习回顾，同时也给需要帮助的朋友作为一个参考。

由于本人也才刚开始学习前端，所以会存在很多问题，希望大家能多多留言，一起探讨学习，共同进步。

单行溢出显示“…”

实现CSS代码

单行溢出相对比较简单只要三个属性就能实现，代码如下

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试溢出点点点</title>
		<style type="text/css">
			.box{
				width: 200px;
				height: 30px;
				border: #549FF4 solid 0.1875rem;
				line-height: 30px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		</style>
	</head>
	<body>
		<div class="box">
			这个是用来测试溢出内容为点点点形式显示
		</div>
	</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fysQICnQ-1596623350416)(C:\Users\niujiajun\Desktop\CSDN博客\03_关于CSS中超出部分点点点的问题\溢出文本用省略号表示.assets\ddd.png)]$

了解个属性

具体了解一下关于这三个属性，以及他们的属性值，方便以后的运用

overflow的属性

这个属性的中文名就是“溢出”，它常用的属性值有5个，visible，hidden，auto，scroll，inherit

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

visible：为默认属性，当内容大于盒子时会换行，溢出的部分会显示

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Iy5Q94xs-1596623350420)(C:\Users\niujiajun\Desktop\CSDN博客\03_关于CSS中超出部分点点点的问题\溢出文本用省略号表示.assets\visible.png)]$
hidden：表示为隐藏，当内容大于盒子时会换行，溢出部分会被隐藏

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1ZOhQoOV-1596623350423)(C:\Users\niujiajun\Desktop\CSDN博客\03_关于CSS中超出部分点点点的问题\溢出文本用省略号表示.assets\hidden.png)]$
auto：表示自动，浏览器根据盒子内容产生不同的显示，当内容大于盒子时会换行，并且盒子会显示滚动条，拖动显示溢出内容

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wYfS7qsx-1596623350428)(C:\Users\niujiajun\Desktop\CSDN博客\03_关于CSS中超出部分点点点的问题\溢出文本用省略号表示.assets\auto.png)]$

当内容小于盒子时会换行，并且盒子不会显示滚动条，内容全部显示在盒子内

（与scroll的最大区别）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z3LgQhMT-1596623350432)(C:\Users\niujiajun\Desktop\CSDN博客\03_关于CSS中超出部分点点点的问题\溢出文本用省略号表示.assets\auto区别.png)]$
scroll：表示滚动，当内容大于盒子时会换行，并且盒子会显示横向和竖向滚动条，拖动显示溢出内容

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7oGYEie6-1596623350434)(C:\Users\niujiajun\Desktop\CSDN博客\03_关于CSS中超出部分点点点的问题\溢出文本用省略号表示.assets\scroll.png)]$

当内容小于盒子时会换行，并且盒子依旧会显示滚动条，内容全部显示在盒子内

（与auto的最大区别）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MKbkUQUI-1596623350435)(C:\Users\niujiajun\Desktop\CSDN博客\03_关于CSS中超出部分点点点的问题\溢出文本用省略号表示.assets\scroll区别.png)]$
inherit：表示继承，继承父的overflow的属性值

white-space属性

这个属性的中文含义就是”空白部分“,一般产生空白效果的键有，tab key（制表符），space key（空格键），enter key（回车键），常用的属性值有6个，normal，nowrap，per，per-line，per-wrap，inherit

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 pre标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 br标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

normal：表示默认值，多个空格键，多个tab键，回车键只占用一个位置，自动换行，br标签会换行

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pA4lSWhu-1596623350437)(C:\Users\niujiajun\Desktop\CSDN博客\03_关于CSS中超出部分点点点的问题\溢出文本用省略号表示.assets\normal.JPG)]$
nowrap：表示不自动换行，多个空格键，多个tab键，回车键只占用一个位置，br标签会换行

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W039nhqW-1596623350439)(C:\Users\niujiajun\Desktop\CSDN博客\03_关于CSS中超出部分点点点的问题\溢出文本用省略号表示.assets\nowrap.JPG)]$

pre：和html中

标签一样，能够保留文本格式。多个空格键，多个tab键占用多个位置，回车和br标签有换行效果，不自动换行

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oABFXDnA-1596623350442)(C:\Users\niujiajun\Desktop\CSDN博客\03_关于CSS中超出部分点点点的问题\溢出文本用省略号表示.assets\pre.JPG)]$

pre-line：多个空格键，多个tab键只占用一个位置，自动换行，br标签和回车键有换行效果

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mKxdQdDH-1596623350444)(C:\Users\niujiajun\Desktop\CSDN博客\03_关于CSS中超出部分点点点的问题\溢出文本用省略号表示.assets\pre-line.JPG)]$
pre-wrap：比pre多了一个自动换行效果，多个空格键和多个tab键占用多个位置，回车键和br标签有换行效果，可以自动换行

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V4PGhdbg-1596623350448)(C:\Users\niujiajun\Desktop\CSDN博客\03_关于CSS中超出部分点点点的问题\溢出文本用省略号表示.assets\pre-wrap.JPG)]$
inherit：表示继承，继承父的overflow的属性值

text-overflow

这个属性的中文字面含义就是”文本溢出“,常用的属性值有3个，clip，ellipsis，string
值描述
clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。
clip：这是一个默认值中文意思是“剪辑”，显示效果比较粗暴，直接显示截断效果，兼容性较好

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0xe6Qff7-1596623350450)(C:\Users\niujiajun\Desktop\CSDN博客\03_关于CSS中超出部分点点点的问题\溢出文本用省略号表示.assets\clip.png)]$
ellipsis：表示省略，和clip效果一样也是截断文字，只不过视觉效果会好点，将不显示的内容以“…”的形式显示，兼容性较好。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XoDVd7Ei-1596623350451)(C:\Users\niujiajun\Desktop\CSDN博客\03_关于CSS中超出部分点点点的问题\溢出文本用省略号表示.assets\ellipsis.png)]$
string：这个表示输入一个字符串，然后将不显示的内容用自己输入的字符串来代替。兼容性价差，火狐游览器可用。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DPR4JZcT-1596623350453)(C:\Users\niujiajun\Desktop\CSDN博客\03_关于CSS中超出部分点点点的问题\溢出文本用省略号表示.assets\string.png)]$

在做测试的时候，我发现要达到这样的效果，必须作用在块级元素上面，不能作用在行内元素或者行内块级元素上面。

值	描述
clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。

牛家军

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
溢出文本用省略号表示

实现文本溢出用“…”来显示说明：在工作中正好，需要实现一个溢出出现省略的效果，所于是上网查了一些资料，由于这不是单一一个属性就能实现的，需要多属性配合使用，所以就写一篇学习记录的博客，方便之后自己学习回顾，同时也给需要帮助的朋友作为一个参考。由于本人也才刚开始学习前端，所以会存在很多问题，希望大家能多多留言，一起探讨学习，共同进步。单行溢出显示“…”实现CSS代码单行溢出相对比较简单只要三个属性就能实现，代码如下overflow: hidden;white-space: nowrap;te
复制链接

扫一扫

专栏目录