text-overflow

text-align | text-decoration | text-indent | text-overflow | text-shadow | text-transform

text-overflow

文字超出邊界時的處理方法，須配合 overflow:hidden 使用。可設為：

1. clip：切去超出的部分不顯示，此為預設值。
2. ellipsis：用 "..." 表示後面還有文字未顯示出來。
3. ellipsis-word：使用 "a€|" 表示後面還有文字未顯示出來。主要瀏覽器都沒支援此項。
4. inherit：繼承父元素的特徵值。

<style type='text/css'> .ovf {width:160px; border:solid 1px red; overflow:hidden; margin:8px 0px; } </style> <div style='text-overflow:clip;' class=ovf> <nobr>子曰：學而時習之，不亦說乎？</nobr> </div> <div style='text-overflow:ellipsis;' class=ovf> <nobr>子曰：學而時習之，不亦說乎？</nobr> </div> <div class=ovf> <nobr>ask not what your country cna do for you</nobr> </div> <div style='text-overflow:ellipsis;' class=ovf> <nobr>ask not what your country cna do for you</nobr> </div>

• Firefox 沒有支援此功能；IE6, Safari, Chrome 成功展現。

:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。 <style type='text/css'> .hvr {width:160px; overflow:hidden; text-overflow:ellipsis; } .hvr:hover {text-overflow:clip;} .hvr:active {overflow:visible;} </style> <div class=hvr> <nobr>子曰：學而時習之，不亦說乎？</nobr> </div>

javascript 應用。可以用 style 物件 的特徵 textOverflow 作動態變化。 <div id='test' style='width:160px; overflow:hidden'> <nobr>子曰：學而時習之，不亦說乎？</nobr> </div> <script type='text/javascript'> function toggleCSS(id, pty, v1, v2, ms) { var os=document.getElementById(id).style; os[pty]= (os[pty] == v1 ) ? v2 : v1; setTimeout('toggleCSS("'+id+'","'+pty+'","'+v1+'","'+v2+'",'+ms+')', ms); } toggleCSS("test", "textOverflow", "clip", "ellipsis", 500); </script>