单行文本:
{overflow: hidden;white-space: nowrap;text-overflow:ellipsis;}
-
white-space: nowrap/规定段落中的文本不进行换行/
-
text-overflow: ellipsis; /当对象内文本溢出时显示省略标记/
多行文本:
{overflow:hidden;text-overflow:ellipsisline-height:20px;display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
即对外层div定义为盒模型
- overflow: hidden;/溢出盒子部分隐藏/
- text-overflow: ellipsis; /当对象内文本溢出时显示省略标记/
- display: -webkit-box; /* 定义为盒模型 */
- -webkit-box-orient: vertical; /* 盒方向定义为竖直方向编排显示 */
- -webkit-line-clamp: 2;/* 限制元素显示的文本行数,当前为2行*/
网友评论