文本内容过长显示省略号

最新推荐文章于 2024-06-06 15:43:11 发布

p_hao

最新推荐文章于 2024-06-06 15:43:11 发布

阅读量8.5k

点赞数 9

本文链接：https://blog.csdn.net/p_hao/article/details/89528776

版权

一、单行文本内容过长

/*overflow 属性规定当内容溢出元素框时发生的事情。
当值为hidden内容会被修剪，并且其余内容是不可见的。*/
overflow: hidden;

/*white-space 属性设置如何处理元素内的空白。
当值为nowrap规定段落中的文本不进行换行。*/
white-space: nowrap;

/*text-overflow 属性规定当文本溢出包含元素时发生的事情。
当值为ellipsis显示省略符号来代表被修剪的文本。*/
text-overflow: ellipsis;

二、多行文本内容过长

/*将对象作为弹性伸缩盒子模型显示。(-webkit代表safari、chrome私有属性)*/
display: -webkit-box;

/*Safari、Opera 以及 Chrome 支持替代的 -webkit-box-orient 属性。
box-orient 属性规定框的子元素应该被水平或垂直排列。
当值为vertical从上向下垂直排列子元素。*/
-webkit-box-orient: vertical;

/*限制在一个块元素显示的文本的行数。 
为了实现该效果，它需要组合其他外来的WebKit属性。(必须结合上面两个属性)*/
-webkit-line-clamp: 3;

overflow: hidden;

三、案例

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.text1{
				width: 200px;
				background: pink;
	
			    overflow: hidden;
			    white-space: nowrap;
			    text-overflow: ellipsis;
			}
			.text2{
				width: 200px;
				background: yellow;
	
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
			}
		</style>
	</head>
	
	<body>
		<p class="text1">这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>
		<p class="text2">这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>
	</body>
</html>

展示效果

在这里插入图片描述

四、总结

今天只是想记录一点日常编写样式会用到的技巧，就是文本内容过长时显示省略号，个人觉得这个很好用。

但是我之前以为css只能做到单行的处理，多行处理要用js去计算，原来直接用css就能实现了，不过很多都是带-webkit的私有属性，具体运用起来各浏览器的兼容性不知道怎么样。

p_hao

关注

9
点赞
踩
16

收藏

觉得还不错? 一键收藏
3
评论
文本内容过长显示省略号

一、单行文本内容过长/*overflow 属性规定当内容溢出元素框时发生的事情。当值为hidden内容会被修剪，并且其余内容是不可见的。*/overflow: hidden;/*white-space 属性设置如何处理元素内的空白。当值为nowrap规定段落中的文本不进行换行。*/white-space: nowrap;/*text-overflow 属性规定当文本溢出包含元素时...
复制链接

扫一扫