文本溢出用省略号表示

一、介绍

1. white-space属性：

white-space: nowrap;  /* 强制在一行显示，直到遇到br标签为止 */
white-space: normal;  /* 自动换行显示（默认） */

2. text-overflow属性

text-overflow: ellipsis;  /* 使用省略符号代替被隐藏文本 */
text-overflow: clip;      /* 直接将要隐藏的文本隐藏起来 */

二、单行文本溢出

div {width: 200px;height: 30px;line-height: 30px;/* ---------------------------------------------------- */white-space: nowrap;      /* 1. 强制文本单行显示 */overflow: hidden;  	      /* 2. 溢出隐藏 */text-overflow: ellipsis;  /* 3. 将被隐藏的文本用省略号表示 */
}

三、多行文本溢出

div {width: 290px;height: 126px;border: 2px solid black;text-indent: 2em;/* ---------------------------------------------------- */overflow: hidden; 		   		/* 1. 将溢出的文本隐藏 */text-overflow: ellipsis; 		/* 2. 将被隐藏的文本用省略号表示 */display: -webkit-box;	   		/* 3. 设置自适应盒子模型（这个属性第一次见，可能理解错误） */   -webkit-line-clamp: 6; 	   		/* 4. 在第几行开始用省略号显示 */-webkit-box-orient: vertical;  	/* 5. 使内容垂直显示 */
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！