CSS學習筆記:溢位文字省略(text-overflow)
阿新 • • 發佈:2018-11-11
在CSS3
中,text-overflow
屬性的基本語法如下:
clip
:表示不顯示省略文字,簡單的裁切。ellipsis
:表示物件文字溢位時顯示省略標記,省略標記插入的位置是最後一個字元。ellipsis-word
:表示當物件文字溢位時顯示省略標記,省略標記插入的位置是最後一個詞(word
)。
實際上,text-overflow
屬性僅用於決定當文字溢位時是否顯示省略標記,並不具備樣式定義的功能,要實現溢位時產生省略號的效果,應該在定義兩個樣式:強制文字在一行內顯示(white-space:nowrap
)和溢位內容為隱藏(overflow:hidden
),只有這樣才能實現溢位文字顯示為省略號效果。
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
dl{
width:240px;
border: solid 1px #ccc;
}
dt {
padding:8px 8px;
background: #7fecad;
font-size: 13px;
text-align: left;
font-weight: bold;
color: #71790c;
margin-bottom: 12px;
border-bottom : solid 1px #efefef;
}
dd{
font-size: 0.78em;
height: 1.5em;
width: 220px;
padding:2px 2px 2px 18px;
margin:2px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<dl>
<dt>體育新聞</dt>
<dd>亞運會在韓國港口城市仁川開幕,韓國總統朴槿惠出席</dd>
<dd>在亞運會首日,韓國軍團佔據獎牌榜第一位</dd>
<dd>亞運游泳觀戰指南:21日開始孫樸5場對決 中日大PK</dd>
<dd>亞運會在韓國港口城市仁川開幕,韓國總統朴槿惠出席</dd>
<dd>在亞運會首日,韓國軍團佔據獎牌榜第一位</dd>
<dd>亞運游泳觀戰指南:21日開始孫樸5場對決 中日大PK</dd>
</dl>
</body>
</html>
效果: