文本缩进修饰上下划线阴影省略鼠标悬停显示内容字符间距

<!-- <!DOCTYPE html> -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本</title>
    <style>
        p{
            text-indent:2em;
        }

        a{ text-decoration:none; }

        p{
            text-shadow:2px 3px 5px green;
        }

        div{
            width: 600px;
            height: 300px;
            border:1px solid red;
            text-align:center;
        }

        .box{
            width: 300px;
            height: 400px;
            border:1px solid red;
            overflow:hidden;
            text-overflow: ellipsis;
            white-space:nowrap;
            letter-spacing: 2em;
            /*vertical-align: middle;
            display: table-cell;*/
        }

    </style>
</head>
<body>
    <!-- 
        文本
            text-indent:   首行缩进   em
                -decoration:  文本修饰
                            overline    上划线
                            underline   下划线
                            line-through  删除线
                            none        取消划线
                -shadow:
                    length   阴影偏移量
                    color    阴影颜色
                    blur     阴影半径

                -align: left  center  right

                -overflow
                    ellipsis   文本超出部分用省略号代替   需要跟overflow配合
                    如果是中文的话, 先强制将中文转成一行
                    white-space:nowrap;

        title  鼠标悬停显示内容

        letter-spacing   字符间距


        vertical-align:
                    top
                    middle
                    bottom

     -->
     <p>中午去ATM存钱，排队时后面的美女问我：“存钱是吗？” “嗯” “我正好要取钱，反正你要存，不如把钱给我，咋俩就不用排队了” 我一想觉得挺有道理，就把钱给她了。。。然后一脸懵逼的看着美女走了.....</p>

     <a href="">这两天日子不顺, 出门忘记看黄历</a>

     <div>
        最好的朋友：睡在我上铺的兄弟。 最爱的女孩：同桌的你。最难忘的事：睡在我上铺的兄弟带走了同桌的你。
     </div>

     <div class='box'>aaaaaaaaaaaaabbbbbbbbbbbbbbbbbvvvvvvvvvvvvvvvvcccccccccccccccc</div>
     <div class='box' title='乘地铁遇到个牛人。 地铁上，一哥们儿的铃声大作，众乘客一听： “爷爷，那孙子又给您来电话了… 爷爷，那孙子又给您来电话了… 爷爷，那孙子又给您来电话了。” 只见那哥们儿慢慢悠悠的掏出手机接听，说道： “喂!爸，什么事..”' >乘地铁遇到个牛人。 地铁上，一哥们儿的铃声大作，众乘客一听： “爷爷，那孙子又给您来电话了… 爷爷，那孙子又给您来电话了… 爷爷，那孙子又给您来电话了。” 只见那哥们儿慢慢悠悠的掏出手机接听，说道： “喂!爸，什么事..”</div>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容