当网页制作中遇到了文本内容溢出的问题，你会使用什么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
作者：聪少Jeff
链接：https://www.jianshu.com/p/b4cf065f6f6c
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦