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

时间:2019-01-14
本文章向大家介绍微信小程序界面设计入门课程-样式wxss中使用css课程-文本-word-spacing 字间隔,主要包括微信小程序界面设计入门课程-样式wxss中使用css课程-文本-word-spacing 字间隔使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

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

基础用法
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)(微信小程序界面设计必备技能)