css3学习之文字展示多余的用三个点显示

2023年2月18日 150次阅读 来源: guxiansheng1991

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

但是要为包含文本的容器设置宽度

能够hover显示全部的操作

<div class="d2">
        <p class="p2">这个世界真的很美好啊</p>
    </div>
        .d2{ width: 100px; height: 300px; border:1px solid #000; }
        .p2{ font-size: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        /*能够在hover的时候显示出来全部的文本*/
        .p2:hover{ text-overflow: inherit; overflow: visible; }
    原文作者：guxiansheng1991
    原文地址: https://blog.csdn.net/guxiansheng1991/article/details/77585102
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞