首頁 > 開發者 > CSS

CSS控制省略符號方式顯示（IE、FF）

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

文章提供三種關於文章標題過長了，控制顯示為略號方法，下面有三款css教程式控制制省略符號方式顯示（ie、ff）代碼，後兩款都相容ie,firefox。

div{
width:200px;/*容器的基本定義*/
height:200px;
background-color:#eee;
}
/* ie下的樣式 */
p span{
display: block;
width:200px;/*對寬度的定義,根據情況修改*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellips教程is;
}/* ff 下的樣式 */
p{clear:both;}
p span{float:left;
max-width:175px;
}
p:after{
content:"...";
}


執行個體

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>css實現超過特定長度顯示省略符號的方法</title>
<style type="text/css">
ul {width:200px; margin:50px auto;}
li {width:200px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
a {color:#03c; font-size:13px;}
a:hover {color:#000;}
</style>
</head>
<body>
<ul>
<li><a href="/htmldata/2007-10-16/1192526505.html">芭比娃娃色調照片，ps製作過程</a>
<li><a href="/htmldata/2007-10-11/1192115032.html">照片處理 ps輕鬆製作漂亮燦爛星空mm特效照</a>
<li><a href="/htmldata/2007-09-13/1189681483.html">photoshop教程簡單打造畫意效果的老照片美女特效</a>
<li><a href="/htmldata/2007-09-13/1189653291.html">照片處理 photoshop為照片添加真實陰影和光線離</a>
<li><a href="/htmldata/2007-08-31/1188554851.html">photoshop簡單為照片繪製可愛個性心形圖案</a>
<li><a href="/htmldata/2007-08-29/1188380812.html">flash教程：簡單實現as繪製貝茲路徑</a>
</ul>
</body>
</html>

執行個體三

.ellipsis a{display: block;width: 300px;overflow: hidden;white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis;}  
/* firefox only */ 
.ellipsis:not(p) {clear: both;}  
.ellipsis:not(p) a {max-width: 300px;float: left;}  
.ellipsis:not(p):after {content: "...";float: left;width: 25px;padding-left: 1px;} 


<div class="ellipsis"><a href="">在被征服後的歲月裡，蒂卡爾自己也走上侵略道路，在瑪雅全境擴張它的勢力範圍。</a></div> 

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

相關關鍵詞：
ff 3ds ff channel ff patcher ff mark font ff e schedule example ff online ps4 ff e list
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

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