text-overflow 文字超出
该属性主要用来定义当文字超出元素限定范围内之后，为了防止页面混乱，对超出元素范围的文字做的一个处理。
1. 官网定义
text-overflow 属性规定当文本溢出包含元素时发生的事情。
2. 解释
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">
慕课网css3属性教学 text-overflow。
</div>
.demo{
height: 30px;
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow:clip ;
}
效果图
文字超出后裁剪内容效果图
-
文字超出元素后使用省略号。
<div class="demo">
css3属性教学 text-overflow。
</div>
.demo{
height: 30px;
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis ;
}
效果图
文字超出元素后使用省略号效果图
-
文字超出后使用 ！。
<div class="demo">
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;一起使用，不能单独用。 -
这个属性通常是在有设置宽度和高度的元素使用。
微信公众号
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/18990.html
