文字超出DIV後,隱藏文字並顯示...

時間 2019-11-11

標籤文字超出 div 隱藏顯示欄目 CSS 简体版

原文原文鏈接

<html>css

<head>
<style type="text/css">
#cs{width:100px;height:50px;line-height:50px;color:#6699ff;border:1px #ff8000 dashed;overflow:hidden;text-overflow:ellipsis}
#cs2{width:200px;height:60px;line-height:20px;color:#6699ff;border:1px #ff8000 dashed;overflow:hidden;text-overflow:ellipsis}
</style>
</head>
<body>
<div id="cs">
<nobr>愛上你的微笑--文字超出顯示省略號，你們能夠複製這段代碼進行實驗下</nobr>
</div> <br>
<div id="cs2">

</div>
</body>
</html>html

text-overflow:ellipsis溢出文本顯示省略號的詳細方法函數

語法：
　　text-overflow : clip | ellipsis
　　參數：
　　clip : 　不顯示省略標記（...），而是簡單的裁切
　　（clip這個參數是不經常使用的！）
　　ellipsis : 　當對象內文本溢出時顯示省略標記（...）
　　說明：
　　設置或檢索是否使用一個省略標記（...）標示對象內文本的溢出。
　　請您注意，text-overflow:ellipsis屬性在FF中是沒有效果的。
　　示例：
　　div { text-overflow : clip; }
　　text-overflow是一個比較特殊的樣式，咱們能夠用它代替咱們一般所用的標題截取函數，並且這樣作對搜索引擎更加友好，如：標題文件有50個漢字，而咱們的列表可能只有300px的寬度。若是用標題截取函數，則標題不是完整的，若是咱們用CSS樣式text-overflow:ellipsis，輸出的標題是完整的，只是受容器大小的侷限不顯示出來罷了。
　　關於text-overflow屬性如何應用，咱們做以下的說明講解：
　　text-overflow屬性僅是註解，當文本溢出時是否顯示省略標記。並不具有其它的樣式屬性定義。咱們想要實現溢出時產生省略號的效果。還必須定義：強制文本在一行內顯示（white-space:nowrap）及溢出內容爲隱藏（overflow:hidden）。只有這樣才能實現溢出文本顯示省略號的效果。搜索引擎

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。