您的位置:首页 - 教程 - CSS - 正文
CSS3的text-overflow
义和用法
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

评论: