属性定义及使用说明
text-overflow 属性指定当文本溢出包含它的元素时，应该如何显示。可以设置溢出后，文本被剪切、显示省略号 (…) 或显示自定义字符串（不是所有浏览器都支持）。
text-overflow 需要配合以下两个属性使用：
- white-space: nowrap;
- overflow: hidden;
| 默认值: | auto |
|---|---|
| 继承: | no |
| 动画: | 支持。 |
| Version: | 3 |
| JavaScript 语法: | object.style.textOverflow=”ellipsis” |
语法
text-overflow: clip|ellipsis|string|initial|inherit;| 值 | 描述 |
|---|---|
| clip | 剪切文本。 |
| ellipsis | 显示省略符号 … 来代表被修剪的文本。 |
| string | 使用给定的字符串来代表被修剪的文本。 |
| initial | 设置为属性默认值。 |
| inherit | 从父元素继承该属性值。 |
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
| 属性 | 谷歌 | IE | 火狐 | 苹果 | opera |
|---|---|---|---|---|---|
| text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
实例
使用text-overflow属性：
HTML
x
27
27
1
2
<html>3
<head>4
<meta charset="utf-8"> 5
<title>Web176教程网(web176.com)</title>6
<style> 7
div.test8
{9
white-space:nowrap; 10
width:12em; 11
overflow:hidden; 12
border:1px solid #000000;13
}14
</style>15
</head>16
<body>17
18
<p>以下 div 容器内的文本无法完全显示，可以看到它被裁剪了。</p>19
<p>div 使用 "text-overflow:ellipsis":</p>20
21
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>22
<p>div 使用 "text-overflow:clip":</p>23
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>24
<p>div 使用自定义字符串 "text-overflow: >>"(只在 Firefox 浏览器下有效):</p>25
<div class="test" style="text-overflow:'>>';">This is some long text that will not fit in the box</div>26
</body>27
</html>阅读剩余 58%
作者：terry，如若转载，请注明出处：https://www.web176.com/css3textpro/5151.html
支付宝 
微信 