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 是控制文字几行 */