CSS文本两行或多行,超出用省略号(...)表示

2022-07-23 10:59:34

废话不多说,直接上代码

<divclass="line style">
	内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分</div><style>.style{width:200px;
		// 不需要定义高度}</style>

此时的效果图
在这里插入图片描述

文本超出一行用省略号(…)显示

//一行显示
.line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

效果图
在这里插入图片描述

文本超出两行或多行用省略号(…)显示

//两行或多行显示
.line{text-overflow: -o-ellipsis-lastline;overflow: hidden;				//溢出内容隐藏text-overflow: ellipsis;		//文本溢出部分用省略号表示display: -webkit-box;			//特别显示模式-webkit-line-clamp: 2;			//行数line-clamp: 2;-webkit-box-orient: vertical;	//盒子中内容竖直排列}

效果图
两行
在这里插入图片描述
三行
在这里插入图片描述

  • 作者:人间真的不值得
  • 原文链接:https://blog.csdn.net/qq_42840755/article/details/122877052
    更新时间:2022-07-23 10:59:34