css怎麼設定溢出不換行

css設定溢位不換行的方法：先建立一個HTML範例檔；然後定義div；最後透過設定「overflow: hidden;text-overflow:ellipsis;」等css樣式實作溢位不換行效果即可。

本文操作環境：windows7系統、HTML5&&CSS3版、Dell G3電腦。

css怎麼設定溢出不換行？

css文字溢出不換行，省略號顯示

單行文字溢出；

設定寬度，多於文字溢出，顯示省略號；

div{
width:300px;    
overflow: hidden;    
text-overflow:ellipsis;    
whitewhite-space: nowrap;
}

多行文字溢出；

使用了WebKit的CSS擴充屬性，該方法適用於WebKit瀏覽器及行動裝置；

注意：

1.-webkit- line-clamp用來限制在一個區塊元素顯示的文字的行數。為了實現該效果，它需要組合其他的WebKit屬性。常見結合屬性：

2.display: -webkit-box; 必須結合的屬性 ，將物件作為彈性伸縮盒子模型顯示 。

3.-webkit-box-orient 必須結合的屬性 ，設定或檢索伸縮盒物件的子元素的排列方式 。

div{
display: -webkit-box;    
-webkit-box-orient: vertical;    
-webkit-line-clamp: 3;    
overflow: hidden;
}

不是Webkit瀏覽器的暫時未有~~

推薦學習：《css影片教學》

以上是css怎麼設定溢出不換行的詳細內容。更多資訊請關注PHP中文網其他相關文章！