css文本单行超出和多行超出省略号

最新推荐文章于 2024-05-14 18:01:48 发布

Neil_Lien

最新推荐文章于 2024-05-14 18:01:48 发布

阅读量211

点赞数

分类专栏： CSS 文章标签：前端 css 超出部分

本文链接：https://blog.csdn.net/sinat_38371266/article/details/104537640

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

单行：

width:300px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

多行：

多行我查了一下有两种方法，一种是用webkit-line-clamp，但是这种方法我试着不管用。所以我用了第二种方法，后缀加after伪元素解决这个问题，但是需要用js判断什么时候显示和隐藏，代码如下，可拷贝

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>多行省略号</title>
	<style>
		span{
			position: relative; 
			line-height: 20px; 
			max-height: 40px;
			overflow: hidden;
			max-width: 100px;
			display: inline-block;
			word-break: break-all;
			float: left;
			margin: 10px;
		}
		span.ellipsis::after{
			content: "..."; 
			position: absolute; 
			bottom: 0; 
			right: 0; 
			padding-left: 40px;
			background: -webkit-linear-gradient(left, transparent, #fff 55%);
			background: -o-linear-gradient(right, transparent, #fff 55%);
			background: -moz-linear-gradient(right, transparent, #fff 55%);
			background: linear-gradient(to right, transparent, #fff 55%);
		}
	</style>
</head>
<body>
	<span>349823942384928349829834982394823</span>
	<span>3498239423849</span>
	<span>349823</span>
<script>
	console.log(document.getElementsByTagName('span')[0].innerText.length);
	if (document.getElementsByTagName('span')[0].innerText.length>=20) {
		document.getElementsByTagName('span')[0].classList.add('ellipsis');
	} 
</script>
</body>
</html>

Neil_Lien

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css文本单行超出和多行超出省略号

单行：width:300px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;多行：多行我查了一下有两种方法，一种是用webkit-line-clamp，但是这种方法我试着不管用。所以我用了第二种方法，后缀加after伪元素解决这个问题，但是需要用js判断什么时候显示和隐藏，代码如下，可拷贝<!DO...
复制链接

扫一扫

专栏目录