当网页制作中遇到了文本内容溢出的问题，你会使用什么CSS3方法来处理呢？此时CSS3的text-overflow会帮助你解决这一个问题。-
Snip20180722_1.png
- text-overflow:clip 实例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css3 文本溢出</title>
<style>
.text-overflow-clip {
width: 100px;
padding: 10px;
border: 1px solid #ccc;
/* clip属性值时，文本没有被裁切，div自动撑高以适应内容的高度。 */
text-overflow: clip;
}
</style>
</head>
<body>
<div class="text-overflow-clip">
Text-overflow属性值为clip的实战，看看他能不能截取文本？如何截取文本？会怎么显示？
</div>
</body>
</html>
效果
Snip20180722_2.png
- text-overflow:clip 实例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css3 文本溢出</title>
<style>
.text-overflow-clip {
width: 100px;
padding: 10px;
border: 1px solid #ccc;
/* clip属性值时，文本没有被裁切，div自动撑高以适应内容的高度。 */
text-overflow: clip;
/* 强制不换行 */
white-space: nowrap;
/* 溢出隐藏 */
overflow: hidden;
}
</style>
</head>
<body>
<div class="text-overflow-clip">
Text-overflow属性值为clip的实战，看看他能不能截取文本？如何截取文本？会怎么显示？
</div>
</body>
</html>
效果
Snip20180722_3.png
- text-overflow: elipsis 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css3 文本溢出</title>
<style>
.text-overflow-clip {
width: 100px;
padding: 10px;
border: 1px solid #ccc;
/* 当文本长度受到元素容器的大小限制无法显示完整，将用'...'来代替隐藏部分 */
text-overflow: ellipsis;
/* 强制不换行 */
white-space: nowrap;
/* 溢出隐藏 */
overflow: hidden;
}
</style>
</head>
<body>
<div class="text-overflow-clip">
Text-overflow属性值为clip的实战，看看他能不能截取文本？如何截取文本？会怎么显示？
</div>
</body>
</html>
效果
Snip20180722_5.png
网友评论