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

来源：互联网发布：java b2b开源电商平台编辑：程序博客网时间：2024/06/15 06:58

有代码有真相!

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>

1 0