CSS 控制文字溢出隐藏与多行隐藏

文章介绍

我们在制作项目中，难免会遇到适应问题，当文字过多的时候，文字溢出隐藏是最常见的用法之一。

控制单行文字溢出隐藏

 overflow:hidden; /* 溢出隐藏 */
 white-space: nowrap; /* 文字强制不换行 */

控制单行文字溢出隐藏，显示省略号

单行文字溢出隐藏，只需将以下代码加入到需要操作的标签中

 overflow:hidden;
 white-space: nowrap;
 text-overflow:ellipsis; /* 溢出隐藏显示三个点 */

CSS 控制文字多行溢出隐藏，显示省略号

如果需要多行隐藏的话，只需要替换以下代码即可

 display: -webkit-box;
 -webkit-box-orient: vertical;
 overflow: hidden;
 -webkit-line-clamp: 2; /* 2 是控制文字几行 */