通常一個網站最基本的功能便是「最新消息」之類的訊息公告欄,卻總有一個老問題糾纏著。通常公告欄每條消息的標題只會佔用一行文字,如果標題過長變成兩行,這下可便扭了。
為了讓它們能夠自動帶有
...
這類點點點型的省略號,對前端開發不熟的後端開發者們,便想出了一個土法煉鋼的方法。function cnSubStr($string, $sublen) {
if ($sublen >= strlen($string)) {
return $string;
}
// 略...
// 略...
}
現在,時代在進步**(IE瀏覽器在進步)**,有一種透過純 CSS 來實現這效果的作法。要說缺點的話,就是只能替「單行」替換省略號,若是區塊型的描述文字串,則無法實現替換省略號。
關鍵的三個屬性
- text-overflow : ellipsis;
- white-space : nowrap;
- overflow : hidden;
支持 IE8, Firefox, Chrome
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="no_title_over_length">
<h2>What is Ember.js?</h2>
<p>Ember is a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture.</p>
</div>
</body>
</html>
.no_title_over_length{
width : 250px;
border : 5px solid black;
padding : 0 5px;
background-color : pink;
}
.no_title_over_length p{
text-overflow : ellipsis;
white-space : nowrap;
overflow : hidden;
}