首頁 > 開發者 > CSS

css 文字溢出省略符號樣式代碼

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

例，原本以為文字溢出的處理比較複雜，沒想到這麼一簡簡單單的一句話就搞定了，css真是神奇：

 代碼如下 複製代碼

.li { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

這隻是使用了CSS中text-overflow屬性，這個屬性比較特殊，在現在的CSS手冊中找不到，但CSS3中有相關的描述：text-overflow-mode。

它有三個值：clip、ellipsis、ellipsis-word。

clip : 不顯示省略標記（…），只是簡單的裁切；
 ellipsis : 當對象內文本溢出時顯示省略標記（…），省略標記插入的位置是最後一個字元。
 ellipsis-word : 當對象內文本溢出時顯示省略標記（…），省略標記插入的位置是最後一個詞（word）。

text-overflow比較特殊，它不能單獨起作用，而是必須跟在overflow:hidden後面作為補充說明使用。如果我們要給一個段落添加這個效果，那麼可以寫：

 代碼如下 複製代碼

p {
white-space: nowrap;
width: 100%; /* IE6 需要定義寬度 */
overflow: hidden;
-o-text-overflow: ellipsis; /* Opera */
text-overflow: ellipsis; /* IE, Safari (WebKit) */
}

firefox7.0開始相容text-overflow:ellipsis;這樣的話，以後的省略符號就可以做到瀏覽器安全色了，程式碼片段為：

width:200px;/*設定寬度*/
white-space:nowrap;/*設定不折行*/
text-overflow:ellipsis;/*這就是省略符號嘍*/
-o-text-overflow:ellipsis;/*相容opera*/
overflow: hidden;/*設定超過的隱藏*/

一個執行個體

 代碼如下 複製代碼

 

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>div中溢出文字用點代替的代碼</title>
<style type="text/css">
/*<![CDATA[*/
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
/*]]>*/
</style>
</head>
<body>
<ul>
<li><a href="#">web標準常見問題大全web標準常見問題大全</a></li>
<li><a href="#">web標準常見問題大全web標準常見問題大全</a></li>
<li><a href="#">web標準常見問題大全web標準常見問題大全</a></li>
<li><a href="#">web標準常見問題大全web標準常見問題大全</a></li>
<li><a href="#">web標準常見問題大全web標準常見問題大全</a></li>
</body>
</html>
[/html]

查閱了下，屬性如下：

white-space：nowrap;表示文本不會換行，在同一行繼續，知道遇到<br>標籤為止；

overflow：hidden;不顯示超過對象尺寸的內容，就是把超出的部分隱藏了；

text-overflow：ellipsis;當文字物件溢出是顯示...，當然也可是設定屬性為clip不顯示點點點；

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More