標籤: overflow

分類
程式技術

網頁排版文字排不下的略語語法

在網頁排版上, 有個很麻煩的地方, 就是在固定寬度的文字走文, 若字數太多時, 需要隱藏, 但又希望在介面上看起來理想, 作法可以利用一個 css 的語法:

text-overflow: ellipsis;

這個語法可以應用在限制一定寬度時, 文字走文若有隱藏的部分, 則會出現 … 這種略縮語的方式, 讓看到的訪客可以理解後面還有文字, 只是被略縮掉了, 這是透過 css 的部分來進行, 而不是限制字數輸出(從server端的作法), 而且可以配合文字的字型(有些字型是調合字, 就是有寬有窄), 不是用字數來設限的方式, 會更有彈性的多了.

來看看效果吧:

http://sample.diary.tw/33/1.htm

這個範例利用了一個 slider (jQuery UI) 來進行寬度限制, 方便大家在測試時, 可以看到不同寬度對於略縮語的應用, 有不同的呈現效果.

這裡用的 css 語法如下:

.style1{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  backgroud: #eeffee;
  width: 240px;
  height: 30px;
}

其中, overflow: hidden; 是超出的部分就不要出現, 而 white-space: nowrap; 是不要換行.

繼續閱續:
http://ant4css.blogspot.tw/2009/03/text-overflow.html

[2013/3/22 12:33]
overflow: hidden; 及 white-space: nowrap; 和這兩個條件併用是必需的, 所以基本上是應用在標題比較適合, 若用在內文走文就沒有辦法利用這個方式來進行了.

可以參考這篇:
http://leeiio.me/text-overflow-ellipsis/

另外也實作了測試: http://sample.diary.tw/33/2.htm 是無法有這個效果的.

分類
程式技術

如何利用CSS不要出現SCROLLBAR

今天在弄一個小網頁, 有個比較特殊的需求是不要出現在 browser 右邊的 scrollbar, 而且是 disabled 狀態的 scrollbar 都不要出現.

查了一下, 其實很單純, 直接使用 overflow: hidden 屬性放在 body 上就可以很容易做到這個需求. 參考這個範例: http://sample.diary.tw/15/1.htm

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
    body {
      overflow: hidden;
    }
    </style>
  </head>
  <body>
  這是內文..
  </body>
</html>

不過, 其實也有另一種需求是反過來的, 就是使用 overflow: auto 的 div 區塊, 一般我們若是在要畫面上出現一個含有 scrollbar 的區域用來顯示一些內容時, 就很方便, 我們可以參考這樣的一個範例: http://sample.diary.tw/15/2.htm

<div style="width: 190px; height: 190px; overflow: auto; background: pink;">
內容.....
</div>

範例內藍色底的部分區塊是未下 overflow: auto; 的屬性, 所以內容若是超出的話, 就會超出, 而下方紅色底的部分區塊則是使用了 overflow: auto; 的屬性, 所以超出的內容自動會出現scrollbar, 而方便排版及呈現, 這是在處理 body 不要出現右側 scrollbar 時也一併查到的資料:
http://apptools.com/examples/scroller.php