HTML+CSS设置文字溢出显示省略号（单行/多行）

 

 

• 单行

1. 设置文字单行显示 white-space: nowrap;

2. 设置内容溢出隐藏 overflow: hidden;

3. 设置文字溢出部门显示省略号 text-overflow: ellipsis;

 

• 多行

1. 设置文字可换行显示white-space: nomal;

2. 设置文字溢出隐藏 overflow: hidden;

3. 设置该块中文字可显示五行 -webkit-line-clamp: 5;

4. 设置或检索伸缩盒子对象的子元素排列方式 -webkit-box-orient: vertical;

5. 设置文字溢出显示省略号 text-overflow: ellipsis;