文字超出邊界時的處理方法，須配合 overflow:hidden 使用。可設為：
- clip：切去超出的部分不顯示，此為預設值。
- ellipsis：用 "..." 表示後面還有文字未顯示出來。
- ellipsis-word：使用 "a€|" 表示後面還有文字未顯示出來。主要瀏覽器都沒支援此項。
- 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> - 執行結果：
子曰：學而時習之，不亦說乎？ 子曰：學而時習之，不亦說乎？ ask not what your country cna do for you ask not what your country cna do for you
- 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> - 執行結果：
子曰：學而時習之，不亦說乎？
