200903041325用 CSS 讓過長溢出的字省略變 ...

這篇的目的就是標題「用 CSS 讓過長溢出的字省略變 ...」,我就直接 DEMO 吧!

HTML

<div>大家好!我是測試行!請看我的最後面有沒有變點點點!</div>

CSS

div {
  overflow : hidden;
  text-overflow : ellipsis;
  white-space : nowrap;
  width : 240px;
}

DEMO

大家好!我是測試行!請看我的最後面有沒有變點點點!

 

重點就在那行 text-overflow : ellipsis ,目前 IE 和 Chrome 支援 text-overflow : ellipsis , Firefox 不支援。但 Firefox 下還是可以觀看,超出的字會被截斷,也就是可能會有字只顯示一半。

後記 Firefox 7 開始支援 text-overflow : ellipsis ,請見 text-overflow - MDN

如果用在 span 上,記得多加一行 display : inline-block !下面 DEMO 用在 span 上︰

HTML

<span>大家好!我是測試行!請看我的最後面有沒有變點點點!</span>

CSS

span {
  display : inline-block;
  overflow : hidden;
  text-overflow : ellipsis;
  white-space : nowrap;
  width : 240px;
}

DEMO

大家好!我是測試行!請看我的最後面有沒有變點點點!

 

延伸 td 實現單行橫向 CSS overflow : hidden
回應
Google 站內搜尋
BloggerAds
累積 | 今日
loading......
    沒有新回應!





Powered by Xuite