在CSS中可以使用white-space屬性配合overflow屬性來實現文字不換行，且超出部分隱藏。下面本篇文章就來給大家具體介紹一下，希望對大家有所幫助。

white-space屬性指定元素內的空白怎樣處理，設置值為nowrap時，文本不會換行，文本會在在同一行上繼續，直到遇到
標簽為止。

overflow屬性規定當內容溢出元素框時發生的事情，當值設置為hidden時，則內容會被修剪，并且其余內容是不可見的。

p {

width: 400px;

height: 100px;

border: 1px solid red;

}

.overflow{

white-space: nowrap;

overflow: hidden;

}

普通文本！！！

這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。

這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。

這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。

這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。

效果圖：

還可以在加上text-overflow屬性，實現超出部分隱藏，且顯示為省略號。

text-overflow屬性規定當文本溢出包含元素時發生的事情，有以下屬性值：clip 修剪文本。

ellipsis 顯示省略符號來代表被修剪的文本。

string 使用給定的字符串來代表被修剪的文本。

示例：

p {

width: 400px;

height: 100px;

border: 1px solid red;

}

.text-overflow{

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

}

普通文本！！！

這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。

這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。

這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。

這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。

效果圖：

總結

以上是生活随笔為你收集整理的html 行内超出隐藏,css如何设置文字不换行超出隐藏？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。