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

心已赠人 2024-02-19 15:55 39阅读 0赞

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

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][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课程-文本-word-spacing 字间隔][-_wxss_css_-_-word-spacing]

[欢迎大家收看我的视频教程：微信小程序样式入门到精通(wxss,css)（微信小程序界面设计必备技能）][wxss_css]  
![微信小程序界面设计入门课程-样式wxss中使用css课程-文本-word-spacing 字间隔][-_wxss_css_-_-word-spacing 1]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[-_wxss_css_-_-word-spacing]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/1433c4c783774945930ab529cae6963d.png
[wxss_css]: https://ke.qq.com/course/368613?tuin=2b10d56
[-_wxss_css_-_-word-spacing 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/b3efc6c321d14bc8ba2137dc2fb6da0c.png