微信小程序界面设计入门课程-样式wxss中使用css课程-文本-word-spacing 字间隔

样式wxss中使用css课程-文本-word-spacing 字间隔

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhua

基础用法
word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近：

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}

<p class="spread">
This is a paragraph. The spaces between words will be increased.
</p>

<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>

可能的值
值 描述
normal 默认。定义单词间的标准空间。
length 定义单词间的固定空间。
inherit 规定应该从父元素继承 word-spacing 属性的值。

小程序应用

Wxml代码

<view>
This is some text。 这里是一些文本。
</view>
<view class='da'>
This is some text。 这里是一些文本。
</view>
<view class='xiao'>
This is some text。 这里是一些文本。
</view>

Wxss代码

.da{
  word-spacing: 10px;/*增加字（单词）之间*/
}
.xiao{
  word-spacing: -0.5em;/*减少字（单词）之间*/
}

效果如下图

欢迎大家收看我的视频教程：微信小程序样式入门到精通(wxss,css)（微信小程序界面设计必备技能）