單行、多行文本溢出隱藏

1.單行文本溢出

overflow: hidden;? ? ? ? ? ? // 溢出隱藏

text-overflow: ellipsis;? ? ? // 溢出用省略號(hào)顯示

white-space: nowrap;? ? ? ? ?// 規(guī)定段落中的文本不進(jìn)行換行

2.多行文本溢出

overflow: hidden;? ? ? ? ? ? // 溢出隱藏

text-overflow: ellipsis;? ? ?// 溢出用省略號(hào)顯示

display:-webkit-box;? ? ? ? ?// 作為彈性伸縮盒子模型顯示。

-webkit-box-orient:vertical; // 設(shè)置伸縮盒子的子元素排列方式：從上到下垂直排列

-webkit-line-clamp:3;? ? ? ? // 顯示的行數(shù)

注意：由于上面的三個(gè)屬性都是 CSS3 的屬性，沒有瀏覽器可以兼容，所以要在前面加一個(gè)-webkit- 來兼容一部分瀏覽器。