首页 > 技术文章 > css显示省略号(单行和多行)

fanqiuzhuji 2020-02-05 15:18 原文

1.单行文本的溢出显示省略号

实现方法:

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

/** 内容溢出元素框会被修剪,并且其余内容是不可见的 **/

/* 超出部分省略号 */

 /** 规定段落中的文本不进行换行 **/

 

效果如图:
dome1

 

 

2.多行文本溢出显示省略号

实现方法:

overflow: hidden;
display: -webkit-box; 
-webkit-box-orient: vertical; 
-webkit-line-clamp: 3; 
word-break: break-all; 

 

/** 内容溢出元素框会被修剪,并且其余内容是不可见的 **/

/** 对象作为伸缩盒子模型显示 **/

 /** 设置或检索伸缩盒对象的子元素的排列方式 **/

/** 显示的行数 **/

/* 允许在单词内换行 */



效果如图:
dome2

推荐阅读