CSS3 知识量：11 - 43 - 138
text-overflow属性用于处理文本溢出问题。当文本内容超出承载它的容器宽度时，该属性会根据设置将文本多出部分省略。
text-overflow属性基本语法为：
text-overflow : clip | ellipsis
其参数简要说明如下：
clip：表示不显示省略标记（...），只是简单的截断文本。
ellipsis：表示显示省略标记（...）。
需要注意的是：要实现文本溢出时裁剪文本显示省略标记的效果，还需要另外3个属性的配合：
强制文本在一行显示，设置属性 white-space : nowrap。
溢出内容隐藏，设置属性 overflow : hidden。
定义好容器的宽度，如：width : 100px。
下面是将属性text-overflow设置为clip的示例：
<!DOCTYPE html>
<html>
<head>
<title>文本溢出</title>
<meta charset="UTF-8">
<style type="text/css">
p{
background-color: yellow;
width: 400px;
white-space: nowrap;
overflow: hidden;
text-overflow:clip;
}
</style>
</head>
<body>
<p>Once upon a time there were three little pigs and the time came
for them to leave home and seek their fortunes.</p>
</body>
</html>显示的效果为：
下面是将属性text-overflow设置为clip的示例：
<!DOCTYPE html>
<html>
<head>
<title>文本溢出</title>
<meta charset="UTF-8">
<style type="text/css">
p{
background-color: yellow;
width: 400px;
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
}
</style>
</head>
<body>
<p>Once upon a time there were three little pigs and the time came
for them to leave home and seek their fortunes.</p>
</body>
</html>显示的效果为：
Copyright © 2017-Now pnotes.cn. All Rights Reserved.
编程学习笔记 保留所有权利
MARK:3.0.0.20240214.P35
From 2017.2.6