有代码 有真相!
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>