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>
表格中的数字表示支持该属性的第一个浏览器版本号。
| Safari | Chrome | FireFox | IE |
| 3.0 | 4.0 | 7.0 | 6.0 |