DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS特效代碼 >> CSS3的text-overflow
CSS3的text-overflow
編輯:CSS特效代碼     
義和用法
text-overflow 屬性規定當文本溢出包含元素時發生的事情。

默認值: clip
繼承性: no
版本: CSS3
JavaScript 語法: object.style.textOverflow="ellipsis"


語法
text-overflow: clip|ellipsis|string;

clip 修剪文本。
ellipsis 顯示省略符號來代表被修剪的文本。
string 使用給定的字符串來代表被修剪的文本。


示例代碼:
<style>
div.testhovertree
{
white-space:nowrap;
width:12em;
overflow:hidden;
border:1px solid #000000;
}

div.testhovertree:hover
{
text-overflow:inherit;
overflow:visible;border:1px solid transparent;
}
</style>

<p>如果您把光標移動到下面兩個 div 上,就能夠看到全部文本。</p>

<p>這個 div 使用 "text-overflow:ellipsis" :</p>

<div class="testhovertree" style="text-overflow:ellipsis;">This is some long text that will not fit in the box.hovertree.com</div>

<p>這個 div 使用 "text-overflow:clip":</p>

<div class="testhovertree" style="text-overflow:clip;">何問起.This is some long text that will not fit in the box</div>

效果如下:

如果您把光標移動到下面兩個 div 上,就能夠看到全部文本。

這個 div 使用 "text-overflow:ellipsis" :

This is some long text that will not fit in the box.hovertree.com

這個 div 使用 "text-overflow:clip":

何問起.This is some long text that will not fit in the box
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved