css实现隐藏多余溢出文字并显示省略号

最新推荐文章于 2025-05-20 14:54:56 发布

weixin_30670925

最新推荐文章于 2025-05-20 14:54:56 发布

阅读量140

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/bubuchu/p/6079839.html

本文介绍了一种使用CSS样式处理文本溢出的方法，通过设置特定的宽度并利用ellipsis实现文本的自动省略显示，适用于网页布局中对段落或标题长度有限制的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<meta charset="utf-8" />
<style>
.txt{
    width:200px;
    border:1px solid #ddd;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>
<p class="txt">溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏</p>