text-overflow属性的使用

text-overflow属性规定了当文本溢出包含元素时所发生的事情。

取值：

当遇到标题过长，影响页面效果的情况时，text-overflow属性发挥它的作用，如下图所示：

重点： 利用text-overflow属性可以使标签内容在确定的长度内显示，剩余部分用“ … ”或者其他字符串代替。然而并不影响标签内部内容。

下面介绍text-overflow属性的做法

• 首先，书写布局

<div class="content"><img src="images/text-overflow1.webp" alt=""><div class="info">【送膜】UEU 苹果6s/6手机壳保护套硅胶磨砂全包防摔iPhone6 Plus 6/6S-经典黑-不漏标-4.7英寸</div>
</div>

• 然后，要对类名为info这个div设置一个宽度，并且设置overflow和white-space属性，并且overflow属性值必须为hidden，white-space属性必须为nowrap。（点击了解white-space属性）
• 最后，添加text-overflow属性即可。

.content {width: 170px;height: 200px;padding: 10px;border: 1px solid #ccc;
}
.info {width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;/*溢出部分用...省略号代替*/}

2. overflow属性： 规定当内容溢出元素框时发生的事情。

注意： text-overflow属性必须配合这两个属性一起使用才生效。

通过上述代码，效果图如下：

上图中，使用了text-overflow： ellipsis，使得超出元素盒子部分用“ … ”代替。

总结： 一般情况下，text-overflow属性用于标题部分布局，并且在一行中显示。然而当复制标题内容时，内容是完整的。