通常一個網站最基本的功能便是「最新消息」之類的訊息公告欄，卻總有一個老問題糾纏著。通常公告欄每條消息的標題只會佔用一行文字，如果標題過長變成兩行，這下可便扭了。
%20%E6%9B%BF%E4%BB%A3%E3%80%8D/20121029175908.png?raw=true)
為了讓它們能夠自動帶有
... 這類點點點型的省略號，對前端開發不熟的後端開發者們，便想出了一個土法煉鋼的方法。function cnSubStr($string, $sublen) {
if ($sublen >= strlen($string)) {
return $string;
}
// 略...
// 略...
}
現在，時代在進步**(IE瀏覽器在進步)**，有一種透過純 CSS 來實現這效果的作法。要說缺點的話，就是只能替「單行」替換省略號，若是區塊型的描述文字串，則無法實現替換省略號。
%20%E6%9B%BF%E4%BB%A3%E3%80%8D/20121029193105.png?raw=true)
關鍵的三個屬性
- 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;
}
