【教學】CSS 文字溢出 自動省略符號

過去在編寫有後台網站的網頁時，經常碰到會碰到後台輸入文字過多，造成前台版面的問題，因為常會用到這自動省略符號的語法。

text-overflow: ellipsis屬性僅是註解，當文本溢出時是否顯示省略標記。並不具備其它的樣式屬性定義。我們想要實現溢出時產生省略號的效果。還必須定義：強製文本在一行內顯示（white-space:nowrap）及溢出內容為隱藏（overflow:hidden）。只有這樣才能實現溢出文本顯示省略號的效果。

p {
      white-space: nowrap;
      width: 100%;                  /* IE6 需要定義宽度 */
      overflow: hidden;             
 
      -o-text-overflow: ellipsis;    /* Opera */
      text-overflow:    ellipsis;    /* IE, Safari (WebKit) */
   }

[推到噗浪]