纯CSS实现多行文本溢出显示省略号（兼容不同浏览器）

最新推荐文章于 2024-08-03 20:42:48 发布

杭电茶娃

最新推荐文章于 2024-08-03 20:42:48 发布

阅读量4.9k

点赞数

分类专栏： CSS 文章标签：多行文本溢出显示省略号

本文链接：https://blog.csdn.net/c11073138/article/details/101532461

版权

1、单行文本溢出显示省略号

单行文本溢出显示省略号比较简单，设置white-space: nowrap避免换行，再设置text-overflow: ellipse即可。

	<style>
	.single-line {
	  width: 200px;
	  line-height: 1.4;
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}
	</style>
    
    <div class="single-line">
      士为知己者死。
	</div>
	<div class="single-line">
      世上本没有路，走的人多了，也便成了路。
	</div>

2、多行文本溢出显示省略号

实现的思路是先设置外层容器，限定要显示的高度。实际显示内容放到内层元素上。
1）接下来添加省略号，基于外层容器设置为绝对定位，显示在外层容器右下角。这样显示区域右下角会存在省略号。
2）添加和省略号大小一样的空白区域，基于内层元素设置为决定定位，显示在实际内容右下角。当内容未溢出时，空白会覆盖省略号。
3）前面设置完后，内容刚好能放下时，外层容器右侧会出现一小块空白。
在内容元素内部后面加上一个和省略号一