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

white-space屬性指定元素內(nèi)的空白怎樣處理，設(shè)置值為nowrap時(shí)，文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到
標(biāo)簽為止。

overflow屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情，當(dāng)值設(shè)置為hidden時(shí)，則內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的。

p {

width: 400px;

height: 100px;

border: 1px solid red;

}

.overflow{

white-space: nowrap;

overflow: hidden;

}

普通文本！！！

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

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

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

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

效果圖：

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

text-overflow屬性規(guī)定當(dāng)文本溢出包含元素時(shí)發(fā)生的事情，有以下屬性值：clip 修剪文本。

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

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

示例：

p {

width: 400px;

height: 100px;

border: 1px solid red;

}

.text-overflow{

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

}

普通文本！！！

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

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

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

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

效果圖：

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。