CSS 有一种方法可以让文字两行超出之后隐藏,这个方法叫做“文本溢出截断”。/*使用 ellipsis 属性,当文本溢出发生时,省略号省略剩余的文本*/ p { overflow: hidden; t
CSS 有一种方法可以让文字两行超出之后隐藏,这个方法叫做“文本溢出截断”。
/*使用 ellipsis 属性,当文本溢出发生时,省略号省略剩余的文本*/ p { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
上面这段代码中,overflow 属性设置为 hidden,这样就可以让溢出的文本被隐藏而不是显示出来。text-overflow 属性设置为 ellipsis,这样当文本溢出发生时,剩余的文本将被省略为省略号。接着 display 属性被设置为 -webkit-box,-webkit-line-clamp 属性被设置为 2,-webkit-box-orient 属性被设置为 vertical,这三个属性的作用是让文本只显示两行且以竖直方向排列。
这种方法可以让文本在空间有限的情况下更好地显示,比如在网页的导航栏、卡片型布局等地方。
粉丝
0
关注
0
收藏
0