CSS控制文本单行超出指定宽度后用省略号代替，多行省略号显示

最新推荐文章于 2019-07-15 17:47:02 发布

chengke2029

最新推荐文章于 2019-07-15 17:47:02 发布

阅读量149

点赞数

原文链接：https://my.oschina.net/qishan/blog/842130

版权

1、单行

.textOverflow{
	width:100px;
	word-break: keep-all;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
<p class="textOverflow">我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落</p>

2、多行

.textOverflow{
	width:100px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
<p class="textOverflow">我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落</p>

转载于:https://my.oschina.net/qishan/blog/842130