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

最新推荐文章于 2024-11-15 15:30:13 发布

转载最新推荐文章于 2024-11-15 15:30:13 发布 · 343 阅读

0 ·

CC 4.0 BY-SA版权

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

文章标签：

#显示 #css #实现 #隐藏

本文详细介绍了一种利用CSS样式实现文本溢出隐藏的方法，通过设置宽度、边框及文本溢出属性，使得超出指定宽度的文本能够优雅地被省略。

本文转载自： https://www.cnblogs.com/bubuchu/p/6079839.html 作者：bubuchu 转载请注明该声明。

<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>