您好!欢迎来到静学网! 注册 登入

  • 静学网专注SEO优化技术视频教程案例分析、算法知识,在这里免费学习到最新的SEO技术,让你轻松通往SEO高工程师级之路,全新的SEO算法将在这里得到解剖。同时静学网提供网站开发、app开发、移动开发、电商、自媒体、行业资讯等内容,丰富及弥补自己的知识体系,让你在未来更具有竞争力。

[CSS教程]'word-spacing属性'是什么意思?与'letter-spacing 属性区别

web前端 教育推动者 次浏览
在网站文章或者网页设计过程中,我们如果注意到一些英文字母有不同的变化,比如一些英文单词字母之间的间距发生了变化,或者说一些长段落的单词之间的间距有长有短,当然一般情况下,它们之间的距离不会太长,否则就影响美观以及阅读的舒适性,还有如果我们想要保留我们键盘上输入的空格,而不是用HTML转义字符,这能做到吗?其实是能的,但是很多时候我们会忽略掉white-space属性,而是使用HTML转义字符,这或许是转义字符更加专业以及更加灵活的原因吧。
 

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>
 
 
效果显示

word-spacing属性
 

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>
实现效果
 
letter-spacing属性
 
注意事项:

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>
 
实现效果
 
 white-space属性
 
注意事项:

1 如果想去除大量空格变成一个空格,那么white-space:normal就是比较好的解决方案,当然数据交互中,我们并不能用此标签。

想学习更多的css教程,关注本站。
 



静学网 , 版权所有丨如未注明 , 均为原创丨转载请注明[CSS教程]'word-spacing属性'是什么意思?与'letter-spacing 属性区别
顶一下
(0)
0%
踩一下
(0)
0%
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
用户名: 验证码:点击我更换图片
合作伙伴:
自学网