html中的文本溢出处理

最新推荐文章于 2022-12-01 17:37:33 发布

律己以严

最新推荐文章于 2022-12-01 17:37:33 发布

阅读量253

点赞数 1

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

本文链接：https://blog.csdn.net/piaoliangj/article/details/116721846

版权

前端专栏收录该内容

33 篇文章 0 订阅

订阅专栏

css实现单行/多行文本溢出省略号显示

- - - - 1. 单行文本处理：
      - 2. 多行文本处理：

1. 单行文本处理：

元素的宽高一定要先确定

p{
    width:80%;
    height:2em;
	white-space:nowrap; /*强制一行显示*/
	overflow:hidden;   /*溢出部分隐藏*/
	text-overflow:ellipsis; /*文字用省略号代替溢出部分*/
}

2. 多行文本处理：

以两行为例，元素的整体宽高也要确定

p{
	width:80%;
    height:4em;
	overflow:hidden;   /*溢出部分隐藏*/
	text-overflow:ellipsis; /*文字用省略号代替溢出部分*/
	display:-webkit-box; /*变为弹性盒*/
	-webkit-line-clamp:2; /*在第二行显示省略号*/
	-webkit-box-orient:vertical; /*垂直居中*/
}