CSS中的省略是指當元素的內容過長時,如何處理溢出部分的問題。
常用的省略有三種:
1. text-overflow 2. overflow 3. white-space
text-overflow
text-overflow是用來控制文字內容超出容器范圍時的省略表現形式。它只有在元素溢出時生效,而且只對單行文本有效。text-overflow常和white-space屬性和overflow屬性一起使用,以控制文字的溢出和省略的效果。
text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
上述代碼的效果是溢出的文字變為省略號,當然,還需要符合一定的瀏覽器兼容性才可以實現。
overflow
overflow是指當元素的內容超出可視區域時,如何控制元素的顯示。它的屬性值有:
overflow: visible | hidden | scroll | auto;
其中,visible表示內容會溢出父容器;hidden則隱藏超出的內容;scroll則出現滾動條,讓用戶可以滾動查看內容;auto則自動判斷是否出現滾動條。
white-space
white-space是指如何處理元素內空格和換行符,常用的屬性值有:
white-space: normal | nowrap | pre | pre-wrap | pre-line;
其中,nowrap表示文字不換行;pre表示包括空格和換行符在內的內容都原封不動地輸出;pre-wrap表示換行時同時保留空格、制表符和換行符;pre-line則只保留效果最好的換行符。
以上就是CSS中常用的省略操作,當然,還有很多其他的解決方式,可以依據具體的需求選擇使用。
下一篇css中的表單不同形式