CSS3 text-overflow 属性
使用text-overflow属性:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.test {
white-space: nowrap;
width: 12em;
overflow: hidden;
border: 1px solid #000000;
}
</style>
</head>
<body>
<p>以下 div 容器内的文本无法完全显示,可以看到它被裁剪了。</p>
<p>div 使用 "text-overflow:ellipsis":</p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<p>div 使用 "text-overflow:clip":</p>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
<p>div 使用自定义字符串 "text-overflow: >>"(只在 Firefox 浏览器下有效):</p>
<div class="test" style="text-overflow:'>>';">This is some long text that will not fit in the box</div>
</body>
</html>
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
属性 | |||||
---|---|---|---|---|---|
text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
属性定义及使用说明
text-overflow属性指定当文本溢出包含它的元素,应该发生什么。
默认值: | clip |
---|---|
继承: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.textOverflow="ellipsis" |
语法
text-overflow: clip|ellipsis|string;
值 | 描述 |
---|---|
clip | 修剪文本。 |
ellipsis | 显示省略符号来代表被修剪的文本。 |
string | 使用给定的字符串来代表被修剪的文本。 |
更多实例
悬停显示整个文本 - 这个例子演示了当鼠标悬停在该元素,如何显示整个文本。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.test {
white-space: nowrap;
width: 12em;
overflow: hidden;
border: 1px solid #000000;
}
div.test:hover {
text-overflow: inherit;
overflow: visible;
}
</style>
</head>
<body>
<p>鼠标移动到框内,查看效果t.</p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<br>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
</body>
</html>
相关文章
CSS3 教程: CSS3 Text Effects