如何實現(xiàn)ul li列表中顯示文字強制不換行大于li寬度的文字自動隱藏

這篇文章主要介紹“如何實現(xiàn)ul li列表中顯示文字強制不換行大于li寬度的文字自動隱藏”，在日常操作中，相信很多人在如何實現(xiàn)ul li列表中顯示文字強制不換行大于li寬度的文字自動隱藏問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何實現(xiàn)ul li列表中顯示文字強制不換行大于li寬度的文字自動隱藏”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

代碼如下:

li{
display:block;
font-size:14px;
height:16px;
line-height:16px;
width:330px;
white-space:nowrap; //強制不換行
overflow:hidden; //自動隱藏文字
text-overflow: ellipsis; //文字隱藏后添加省略號
-o-text-overflow:ellipsis; //適用于opera瀏覽器
}

涉及關(guān)鍵屬性的語法:

1、語法：
text-overflow : clip | ellipsis
參數(shù)：
clip : 　不顯示省略標(biāo)記（...），而是簡單的裁切
ellipsis : 　當(dāng)對象內(nèi)文本溢出時顯示省略標(biāo)記（...）

2、
語法：
overflow : visible | auto | hidden | scroll
參數(shù)：
visible : 　不剪切內(nèi)容也不添加滾動條。假如顯式聲明此默認(rèn)值，對象將被剪切為包含對象的window或frame的大小。并且clip屬性設(shè)置將失效
auto : 　此為body對象和textarea的默認(rèn)值。在需要時剪切內(nèi)容并添加滾動條
hidden : 　不顯示超過對象尺寸的內(nèi)容
scroll : 　總是顯示滾動條

3、
語法：
white-space : normal | pre | nowrap
參數(shù)：
normal : 　默認(rèn)處理方式
pre : 　用等寬字體顯示預(yù)先格式化的文本。不合并字間的空白距離和進(jìn)行兩端對齊。參閱pre對象
nowrap : 　強制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者遭遇br對象。參閱td，div等對象的nowrap屬性（特性）

到此，關(guān)于“如何實現(xiàn)ul li列表中顯示文字強制不換行大于li寬度的文字自動隱藏”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>