前端提高篇（三十七）CSS进阶5，web开发框架

a {

display: inline-block;

width: 100px;

border:1px solid #000;

white-space: nowrap;/* 强制不换行 */

text-overflow: clip;/* 超出直接截断 */

overflow: hidden;/* 超出部分隐藏 */

}

运行效果：可以看到，超过的字符都没有换行，是直接截断的，并且超出部分隐藏

超出部分设置打点：

text-overflow: ellipsis;/* 超出部分打点 */

效果：

2.2 多行打点

文本超过两行就打点：

a {

display: inline-block;

width: 100px;

border:1px solid #000;

text-overflow: ellipsis;/* 超出部分打点 */

overflow: hidden;/* 超出部分隐藏 */

-webkit-line-clamp: 2;

display:-webkit-box;

/* 子元素被垂直排列 */

-webkit-box-orient: vertical;

}