CSS text-overflow 属性值说明
| 值 | 描述 |
|---|---|
| clip | 在内容区域的限制下剪切文本，截断可以在字符的中间发生。这是此属性的默认值。 |
| ellipsis | 呈现省略号（“...”）以显示剪辑的文本。 |
| <string> | 使给定字符串表示剪辑文本。字符串显示在内容区域内。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
CSS text-overflow 属性指定应如何向用户发出溢出的内联文本信号。
它是 CSS3 属性之一。
如果溢出属性设置为“隐藏”，并且空格设置为“nowrap”，则文本溢出属性有效。
在 CSS3 中，规范允许使用自定义字符串。
可以使用被视为字符串或者任何其他自定义字符串的空格。
在旧版本的规范中，我们注意到我们可以使用 URL 指向省略号的图像，但它被删除了。
| 初始值 | clip |
|---|---|
| 应用于 | 阻止容器元素。 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS3. |
| DOM 语法 | object.style.textoverflow =“eLlipsis”; |
语法
text-overflow: clip | ellipsis | string | initial | inherit;
文本溢出属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
white-space: nowrap;
background-color: #eee;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #666;
}
</style>
</head>
<body>
<h2>Text-overflow 属性示例</h2>
<h3>text-overflow: ellipsis</h3>
<div>Lorem Ipsum</div>
</body>
</html>
带有 "clip"、"ellipsis" 和 "initial" 值的 text-overflow 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div.element1 {
white-space: nowrap;
background-color: #eee;
width: 50px;
overflow: hidden;
text-overflow: clip;
border: 1px solid #666;
}
div.element2 {
white-space: nowrap;
background-color: #eee;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #666;
}
div.element3 {
white-space: nowrap;
background-color: #eee;
width: 50px;
overflow: hidden;
text-overflow: initial;
border: 1px solid #666;
}
</style>
</head>
<body>
<h2>Text-overflow 属性示例</h2>
<h3>text-overflow: clip</h3>
<div class="element1">Lorem Ipsum</div>
<h3>text-overflow: ellipsis</h3>
<div class="element2">Lorem Ipsum</div>
<h3>text-overflow: initial</h3>
<div class="element3">Lorem Ipsum</div>
</body>
</html>
日期：2020-06-02 22:14:49 来源：oir作者：oir