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

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