text-overflow 文字超出

发布时间：2023-03-15 11:12:07 所属栏目：教程来源：

导读：text-overflow 文字超出
该属性主要用来定义当文字超出元素限定范围内之后，为了防止页面混乱，对超出元素范围的文字做的一个处理。

1. 官网定义
text-overflow 属性规定当文本溢出包含元素时发生的事情。

2

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: px;
width: px;
overflow: hidden;
white-space: Nowrap;
text-overflow:clip ;

文字超出后裁剪内容效果图
文字超出元素后使用省略号。
<div class="demo">
网css3属性教学 text-overflow。
</div>
.demo{
height: px;
width: px;
overflow: hidden;
white-space: Nowrap;
text-overflow:ellipsis ;

文字超出元素后使用省略号效果图
文字超出后使用！。
<div class="demo">
网css3属性教学 text-overflow。
</div>
.demo{
height: px;
width: px;
overflow: hidden;
white-space: Nowrap;
text-overflow:"!" ;

文字超出后使用 `！`效果图
说明：只在火狐浏览器兼容。

6. 经验分享
text-overflow这个属性常常用来限制文字超出后我们怎么去处理超出的这部分文字，通常是隐藏掉，这样才不会破坏页面的视觉效果，不会把文字堆积重叠到一起。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!