当网页制作中遇到了文本内容溢出的问题，你会使用什么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 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦