CSS 控制单行文本和多行文本的显示区域不够存放时使用省略号...来替代的做法

本文链接：https://blog.csdn.net/Inite/article/details/74930966

本文介绍了如何使用CSS控制当单行及多行文本超出显示区域时，用省略号(...)进行截断的方法，帮助优化网页布局。

摘要由CSDN通过智能技术生成

1、单行文本控制超出存放区域时使用 "..." 代替的 css 控制如下：

       .singleLine{
	        width:120px;
		background:#0ff;
                overflow:hidden;/*多余文字隐藏*/
		white-space:nowrap;/*不换行*/
		text-overflow:ellipsis;/*多余文字使用"..."代替*/
	 }

2、多行文本控制超出存放区域时使用 "..." 代替的 css 控制如下：

	 .multiLine{
	    width:120px;
		background:#0ff;
		overflow:hidden;/*多余文字隐藏*/
		text-overflow:ellipsis;/*多余文字使用"..."代替*/
		display:-webkit-box;/*盒子模型*/
		-webkit-line-clamp:3;/*设置在第三行显示"..." */
		-webkit-box-orient:vertical;/*竖直排列*/
	 }

测试代码及效果图如下所示：

<html>
  <style type="text/css">
     .singleLine{
	        width:120px;
		background:#0ff;
                overflow:hidden;/*多余文字隐藏*/
		white-space:nowrap;/*不换行*/
		text-overflow:ellipsis;/*多余文字使用"..."代替*/
	 }
	 .multiLine{
	        width:120px; /** 可以不指定高度 */
		background:#0ff;
		overflow:hidden;/*多余文字隐藏*/
		text-overflow:ellipsis;/*多余文字使用"..."代替*/
		display:-webkit-box;/*盒子模型*/
		-webkit-line-clamp:3;/*设置在第三行显示"..." ，必须指定，不然没“...”效果*/
		-webkit-box-orient:vertical;/*竖直排列*/
	 }
  </style>
  <body>
     <div class="singleLine">
	    啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
	 </div>
	 <hr/>
	 <div class="multiLine">
	    啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
	 </div>
  </body>
</html>