ul li列表中顯示文字強制不換行大于li寬度的文字自動隱藏

2024-07-11 08:31:16

字體：大中小

來源：轉載

供稿：網友

復制代碼

代碼如下:
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瀏覽器
}

涉及關鍵屬性的語法:

1、語法：
text-overflow : clip | ellipsis
參數：
clip : 　不顯示省略標記（...），而是簡單的裁切
ellipsis : 　當對象內文本溢出時顯示省略標記（...）

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

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

上一篇：css實現照片模糊效果類似毛玻璃效果

下一篇：通過浮動+定位實現兩個div在同一行