css 超出部分顯示省略號

時間 2019-11-09

標籤 css 超出部分顯示省略號欄目 CSS 简体版

原文原文鏈接

代碼： overflow: hidden; white-space: nowrap; text-overflow: ellipsis; css

重點代碼：text-overflow: ellipsis; html

解釋：簡單理解就是我要把文本限制在一行（white-space: nowrap;），確定這一行是有限制的(width)，而且你的溢出的部分要隱藏起來（overflow: hidden；），而後出現省略號（ text-overflow: ellipsis）。css3

text-ellipsis是一個特殊的樣式，有關解釋是這樣的：text-overflow屬性僅是註解，當文本溢出時是否顯示省略標記。並不具有其它的樣式屬性定義。要實現溢出時產生省略號的效果還須定義：強制文本在一行內顯示（white-space:nowrap）及溢出內容爲隱藏（overflow:hidden），只有這樣才能實現溢出文本顯示省略號的效果。ui

代碼：
spa

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title> css 超出部分顯示省略號</title>
</head>
<body>
    <div id="div1" style="width: 100px; background: #ccc; overflow: hidden; white-space: nowrap;  text-overflow: ellipsis; ">省略號啊省略號啊省略號啊</div>
    重點樣式是  text-overflow: ellipsis; <br />

    text-ellipsis是一個特殊的樣式，有關解釋是這樣的：text-overflow屬性僅是註解，當文本溢出時是否顯示省略標記。並不具有其它的樣式屬性定義。要實現溢出時產生省略號的效果還須定義：強制文本在一行內顯示（white-space:nowrap）及溢出內容爲隱藏（overflow:hidden），只有這樣才能實現溢出文本顯示省略號的效果。

    簡單理解就是我要把文本限制在一行（white-space: nowrap;），確定這一行是有限制的(width)，而且你的溢出的部分要隱藏起來（overflow: hidden；），而後出現省略號（ text-overflow: ellipsis）。
</body>
</html>

附： white-space: nowrap; http://www.w3cschool.cn/pr_text_white-space.htmlcode

text-overflow: ellipsis; http://www.w3chtml.com/css3/properties/text/text-overflow.htmlxml

相關標籤/搜索

每日一句

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