您的位置：首页 > Web前端 > CSS

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

2016-06-24 17:42 337 查看

有代码有真相!

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航