css的文本装饰，文本缩进，空白符，换行符使用示例

最新推荐文章于 2024-07-03 18:00:13 发布

米小豆361

最新推荐文章于 2024-07-03 18:00:13 发布

阅读量671

点赞数 1

本文链接：https://blog.csdn.net/zxwd2015/article/details/51754724

版权

有代码有真相!

text-decoration 文本装饰
text-indent 首行缩进
white-space 空白符
word-break 换行符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css文本装饰text-decoration，空白符white-space，换行符word-break</title>
    <style>
        .under {
            /*下划线*/
            text-decoration: underline;
        }

        .over {
            /*上划线*/
            text-decoration: overline;
        }

        .del {
            /*删除线*/
            text-decoration: line-through;
        }

        .no {
            /*没有效果*/
            text-decoration: none;
        }

        div p {
            /*首行缩进，适用块级标签*/
            text-indent: 2em;
        }

        div a {
            /*空白符的显示处理:
            normal  如果宽度不够，折行显示
            nowrap   即使宽度不够 也不折行显示
            pre      按内容编写的格式显示
            */
            white-space: pre;
            /*换行符的显示:
            normal      正常显示不折断
            break-all   单词拆开换行
            keep-all    单词不拆开，空格,连字符折断换行*/
            word-break: keep-all;
        }

        .div1 {
            width: 200px;
            border: 1px solid red;

        }
    </style>
</head>
<body>
<p> 文本装饰</p>
<div>
    <span class="under">我是下划线</span>
    <span class="over">我是上划线</span>
    <span class="del">我是删除线</span>
    <span class="no">我没有效果</span>
</div>
<hr>
<div class="div1">
    <p> 英国脱欧英国脱欧英国脱欧英国脱欧英国脱欧英国脱欧
        英国脱欧英国脱欧英国脱欧英国脱欧英国脱欧英国脱欧
        英国脱欧英国脱欧英国脱欧英国脱欧英国脱欧英国脱欧
        英国脱欧英国脱欧英国脱欧
    </p>
    <a>
        英国脱欧英国脱欧英国脱欧英国脱欧英国脱欧英国脱欧
        英国脱欧英国脱欧英国脱欧英国脱欧英国脱欧英国脱欧
        英国脱欧英国脱欧英国脱欧英国脱欧英国脱欧英国脱欧
        英国脱欧英国脱欧英国脱欧
    </a>
</div>
</body>
</html>