[分享]css内容溢出自动隐藏

对于网页设计中的内容溢出问题，CSS提供了一种简单的解决方案，就是将内容溢出的部分自动隐藏起来。overflow: hidden; 以上代码可以将包含内容溢出的元素隐藏掉，比如下面的例子： 这是一段超...

对于网页设计中的内容溢出问题，CSS提供了一种简单的解决方案，就是将内容溢出的部分自动隐藏起来。

overflow: hidden; 

以上代码可以将包含内容溢出的元素隐藏掉，比如下面的例子：

<div style="width: 200px;height: 100px;overflow: hidden;">
    <p style="width: 300px">这是一段超长的文字内容，会溢出父级元素的范围。</p>
</div> 

以上代码中的div元素宽度为200px、高度为100px，p元素的宽度为300px，显然p元素会导致div元素的内容溢出，利用overflow：hidden属性可以将溢出的部分隐藏掉。

需要注意的是，如果直接使用上述方式进行溢出隐藏，会导致部分内容被隐藏而无法访问。一种更好的解决方案是，使用text-overflow属性，可以增加省略号等样式提示用户该部分内容被隐藏了。

text-overflow: ellipsis; 

组合使用overflow: hidden和text-overflow: ellipsis属性，可以实现更好的内容溢出自动隐藏效果。