CSS3(二)——文本字体文本阴影text-shadow:5px6px7pxred(水平竖直模糊程度阴影颜色)文字溢出隐

文本阴影 text-shadow : 5px 6px 7px red(水平竖直模糊程度阴影颜色)
文字溢出隐藏：text-overflow:ellipsis(溢出变成省略号) clip（文字溢出裁掉）

<!--文字溢出隐藏固定模式-->
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden; 
这三个必须一起写，这很重要

 <style>
    div{
        height: 500px;
        width: 500px;
        
    }
    div::after{
        content: "";
        display: block;
        height: 200px;
        width: 200px;
        background: khaki;
    }
    span:first-of-type{
        /* 该类型下的第一个 */
        height: 300px;
        width: 300px;
        background: lawngreen;
        text-shadow: 5px 10px 2px red;
    }
    p:first-of-type{
        height: 100px;
        width: 100px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        /* ellipsis 溢出变成省略号..... & clip 溢出变成裁掉*/
        /* 
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden; 
        必须要写，这很重要
        */
    }
    </style>
</head>
<body>
    <div>
        <span>哈哈哈</span>
        <p>施工卡卡个施工卡卡个施工卡卡个施工卡卡个施工卡卡个施工卡卡个施工卡卡个施工卡卡个施工卡卡个施工卡卡个</p>
    </div>
</body>

效果如下