2012年10月29日 星期一

透過 CSS 實現「標題過長以省略符 (點點點) 替代」

origin: https://github.com/QueenbyeR/blog-text/blob/master/%E9%80%8F%E9%81%8E%20CSS%20%E5%AF%A6%E7%8F%BE%E3%80%8C%E6%A8%99%E9%A1%8C%E9%81%8E%E9%95%B7%E4%BB%A5%E7%9C%81%E7%95%A5%E7%AC%A6%20(%E9%BB%9E%E9%BB%9E%E9%BB%9E)%20%E6%9B%BF%E4%BB%A3%E3%80%8D/page-001.md




通常一個網站最基本的功能便是「最新消息」之類的訊息公告欄，卻總有一個老問題糾纏著。通常公告欄每條消息的標題只會佔用一行文字，如果標題過長變成兩行，這下可便扭了。
自動換行
為了讓它們能夠自動帶有 ... 這類點點點型的省略號，對前端開發不熟的後端開發者們，便想出了一個土法煉鋼的方法。
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;
}
張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)