如何顯示固定寬度的 Label, 超過會顯示 ...

 

我們在套版的時候，常常會遇到那種「文字寬度固定」的版型，我們通常的作法都是用 Substring 將長篇的文字擷取一部份起來顯示，但問題是「中文字的寬度常常無法估計」，但客戶又要求寬度一定要跟設計師設計的一模一樣，文字太多的時候不能超出版面，以免破壞美美的版面。

請看這段文字：

這是一段非常長的文字這是一段非常長的文字這是一段非常長的文字這是一段非常長的文字

如果客戶要求我們顯示文字的寬度不得超過 300px 怎麼辦呢？！如果你用 Substring 常常不是「長一點」就是「短一點」，尤其是中、英混雜的文字更是如此！

請再看這段文字：

這是一段非常長的文字這是一段非常長的文字這是一段非常長的文字這是一段非常長的文字

看出哪裡不一樣了嗎？ 沒錯，我們限定了固定的寬度，且最後面還會幫我們加上 "..." 符號（此效果只在 IE 有效）

其實我們可以透過簡單的 CSS 定義就可以達到這個維持版面配置的要求，而完全不需要使用 Substring，底下是上面那個範例的 CSS 定義，標注紅色的部分就是設定的重點：

<style>
.box2 {
    margin: 0 20px;
    text-overflow: ellipsis;
    overflow:hidden;
    white-space:nowrap;
    border: 1px dashed #333;
    width: 300px;
    padding: 10px;
}
</style>

相關連結

 

posted @ 2008-06-12 14:04  choirboy  阅读(658)  评论(0)  编辑  收藏  举报