text-overflow 文字超出
该属性主要用来定义当文字超出元素限定范围内之后,为了防止页面混乱,对超出元素范围的文字做的一个处理。
1. 官网定义
text-overflow 属性规定当文本溢出包含元素时发生的事情。
2. xx解释
text-overflow 用于设置当文字内容超过所在元素设定的范围时候的展示效果。
3. 语法
.demo{
text-overflow: clip|ellipsis|string;
}
值 |
说明 |
clip |
超出内容后裁剪 |
ellipsis |
文字溢出后使用在最后的结尾使用省略号 |
string |
使用给定的字符串来代表被修剪的文本 |
4. 兼容
IE |
Edge |
Firefox |
Chrome |
Safari |
Opera |
ios |
android |
all |
all |
all |
all |
all |
all |
all |
all |
5. 实例
<div class="demo">
xx网css3属性教学 text-overflow。
</div>
.demo{
height: 30px;
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow:clip ;
}
文字超出后裁剪内容效果图
<div class="demo">
xx网css3属性教学 text-overflow。
</div>
.demo{
height: 30px;
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis ;
}
文字超出元素后使用省略号效果图
<div class="demo">
xx网css3属性教学 text-overflow。
</div>
.demo{
height: 30px;
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow:"!" ;
}
文字超出后使用 `!`效果图
6. 经验分享
text-overflow
这个属性常常用来限制文字超出后我们怎么去处理超出的这部分文字,通常是隐藏掉,这样才不会破坏页面的视觉效果,不会把文字堆积重叠到一起。
7. 小结
text-overflow
一定要和overflow: hidden;
、white-space: nowrap;
一起使用,不能单独用。
- 这个属性通常是在有设置宽度和高度的元素使用。