Web速查-索引

text-overflow

定义

text-overflow 属性规定当文本溢出包含元素时发生的事情。

语法

text-overflow: clip|ellipsis|string;

属性值

描述
clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NTHOME-零基础入门学习Web(HTML5+CSS3)</title>
<style>
.a {
/*规定段落中的文本不进行换行*/
white-space: nowrap;
width: 50px;
overflow: hidden;
text-overflow: clip;
border: 1px solid #000000;
}
.b {
/*规定段落中的文本不进行换行*/
white-space: nowrap;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
.c {
/*规定段落中的文本不进行换行*/
white-space: nowrap;
width: 50px;
overflow: hidden;
text-overflow: "----";
border: 1px solid #000000;
}
</style>
</head>
<body>
<h2>text-overflow: clip (default):</h2>
<div class="a">Welcome to nitian.web3v.vip</div>
<h2>text-overflow: ellipsis:</h2>
<div class="b">Welcome to nitian.web3v.vip</div>
<h2>text-overflow: "----" (user defined string):</h2>
<div class="c">Welcome to nitian.web3v.vip</div>
</body>
</html>

text-overflow: clip (default):

Welcome to nitian.web3v.vip

text-overflow: ellipsis:

Welcome to nitian.web3v.vip

text-overflow: "----" (user defined string):

Welcome to nitian.web3v.vip

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号

Safari Chrome FireFox IE
3.0 4.0 7.0 6.0