CSS 文本超出指定宽度后隐藏并显示为省略号鼠标移上显示全文

最新推荐文章于 2024-05-15 13:54:01 发布

原创最新推荐文章于 2024-05-15 13:54:01 发布 · 1.2w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文介绍了一种使用CSS实现文本溢出省略号效果的方法，通过设置特定样式属性如text-overflow, overflow及white-space等，使超出容器的文本能够以优雅的方式显示。

css

.over_flow{
         padding: 10px;
         width: 78px;
         height:30px;
         text-shadow: 3px 3px 3px #aaaaaa;
         border: 1px solid #;
         text-overflow: ellipsis;
         overflow: hidden;
         word-break: break-all;
         white-space: nowrap;
         }

</style>

html

<p class="over_flow" title="AAAAAAAAAAAAAAAAA">
AAAAAAAAAAAAAAAAA
</p>