word-spacing属性定义
word-spacing属性从字面意思上看是单词间距的意思,实际也就是这么回事。
word-spacing属性值有哪些?
normal 默认。定义单词间的标准空间。
length 定义单词间的固定空间。
inherit 规定应该从父元素继承 word-spacing 属性的值。
代码实现过程
<!DOCTYPE html>
<html>
<head>
<title>css教程</title>
<style type="text/css">
.transform{
text-transform: capitalize;
word-spacing: normal;
}
.transform1{
text-transform: uppercase;
word-spacing: 0.8em;
}
.transform2{
text-transform: lowercase;
word-spacing: inherit;
}
.transform4
</style>
</head>
<body>
<div class="transform">
this is a css, it`s very much
</div>
<div class="transform1">
This IS a css, it`s very much
</div>
<div class="transform2">
This is a css, it`s very much
</div>
</body>
</html>
效果显示

letter-spacing 属性定义
字母间隔修改的是字符或字母之间的间隔,而不是单词的整体,这一点需要记住。
Letter-spacing属性值
normal 默认。规定字符间没有额外的空间。
length 定义字符间的固定空间(允许使用负值)。
inherit 规定应该从父元素继承 letter-spacing 属性的值。
代码实现过程
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
.css1{
letter-spacing: 0.5em;
}
.css2{
letter-spacing:normal;
}
</style>
</head>
<body>
<div class="css1">The CSS is very good</div>
<div class="css2">The CSS is very good</div>
</body>
</html>
实现效果
注意事项:
1 word-spacing和letter-spacing 都可以使用负值,会往相反的方向靠拢,简单来说就是更加的紧致。
2 注意word-spacing对于中文字符并不敏感,而lettet-spacing对中文敏感。
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
.css1{
word-spacing: 0.5em;
}
.css2{
letter-spacing:0.5em;
}
</style>
</head>
<body>
<div class="css1">我爱世界</div>
<div class="css2">我爱世界</div>
<div class="css3">The CSS is very good</div>
</body>
</html>
white-space 属性定义
相对来讲,这个属性用的比较少,原因就在于它不够灵活。它会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。
white-space 属性值
值 空白符 换行符 自动换行
pre-line 合并 保留 允许
normal 合并 忽略 允许
nowrap 合并 忽略 不允许
pre 保留 保留 不允许
pre-wrap 保留 保留 允许
代码实现过程
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
.css1{
white-space: pre;
}
.css2{
white-space: pre-line;
}
.css3{
white-space: pre-wrap;
}
.css4{
white-space:nowrap;
}
</style>
</head>
<body
<div class="css1">1我爱css 我爱静学网 我爱css3
我爱html</div><br/>
<div class="css2">2我爱css 我爱静学网
我爱css3 我爱html</div><br/>
<div class="css3">3我爱css 我爱静学网
我爱css3 我爱html</div><br/>
<div class="css4">4我爱世界
我爱静学网我爱java</div><br/>
<div class="css5">5The CSS is very good</div><br/>
</body>
</html>
实现效果

注意事项:
1 如果想去除大量空格变成一个空格,那么white-space:normal就是比较好的解决方案,当然数据交互中,我们并不能用此标签。
想学习更多的css教程,关注本站。
顶一下
(0)
踩一下
(0)