CSS中超出的常值內容顯示省略符號

標籤：class   兩種   amp   文本   idt   ellipsis   splay   添加   沒有   

首先，分析超出內容有兩種情況，單行內容超出和多行內容超出，以下逐一說明：

單行內容操作：

　　單行操作必須有width屬性，就是元素要有寬和高的限制才可以，具備以上基本條件之後，編寫以下代碼

　　overflow:hidden;

　　text-overflow:ellipsis;

　　white-space:nowrap;

　　此時，即可看到單行文本超出顯示省略符號的效果。

多行內容操作：

　　多行文本超出省略早期是沒有該寫法的，本文使用的是css3對WebKit的拓展寫法，需要注意，該方法只適用於WebKit瀏覽器和移動端頁面。

　　以下為關鍵程式碼片段：

　　overflow: hidden;

　　display: -webkit-box;

　　-webkit-line-clamp: 5;

　　-webkit-box-orient: vertical;

　　此時，即可看到多行文本超出顯示省略符號的效果。
簡單解釋：
　　首先設定元素為彈性盒模型，也即是display:box,然後設定限制文本的行數，使用line-clamp屬性，最後設定彈性盒子內容的相片順序box-orient，別忘卻了還需要添加超出隱藏屬性設定overflow: hidden。

　　以上就是設定CSS中超出的常值內容顯示省略符號的方法！

CSS中超出的常值內容顯示省略符號