微信小程序--二--文本属性

js学习

以后坚持一日一更，和大家分享我每天学习的成果及经验，让想要学习的小伙伴少走弯路。

学习一门语言，首先要了解它的基本属性，所以我们从最基本的文本属性学起，这样也便于以后的学习。

一、text-indent

首行缩进，注意：text-indent只能用在块级元素

 <text style='text-indent:20px;'>吉利帝豪发时间考虑好的快乐撒娇的凯撒经理</text><!--不会缩进-->
 <view style='text-indent:20px;'>吉利帝豪发时间考虑好的快乐撒娇的凯撒</view>

二、text-decoration

上中下划线
text-decoration:none 去掉超链接的默认线条
下划线
<text style=' text-decoration:underline;'>123</text>
上划线
<text style=' text-decoration:overline;'>123</text>
中划线
<text style=' text-decoration:line-through;'>123</text>

三、text-overflow

text-overflow:ellipsis 文本溢出变成省略号;
务必注意：使用text-overflow时，需要设置固定的宽度才起作用，所以该元素必须具有块状元素的属性（款装元素+行内块状元素）必须配合着overflow: hidden; white-space:nowrap; 才会起作用
line-clamp:2; 显示的行数
word-break: break-all自动换行
box-orient: vertical从上到下自动排列子元素

四、text-shadow

文字阴影：text-shadow：x y b c;
x:x轴 y:y轴 b:阴影模糊程度 c:颜色
<text style='text-shadow:2px 2px 5px red;'>ghjkl</text>

五、text-transform

修改字体大小写， text-transform 这个属性有 4 个值：none | uppercase | lowercase | capitalize
none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母，仅有小写字母。
inherit 规定应该从父元素继承 text-transform 属性的值

 <view style='text-transform:none;'>sadadsad</view>
 <view style='text-transform:uppercase;'>sadadsad</view>
 <view style='text-transform:lowercase;'>ASDADA</view>
 <view style='text-transform:capitalize;'>asddad asdas</view>

六、word-break

word-break:break-all; 自动换行
配合text-overflow和line-clamp就可以实现自动换行，加最后一行省略号结尾

七、word-wrap

word-wrap 长单词自动换行，一个单词太长第一行显示不下，
那么这个单词会举家迁到第二行，而word-wrap则会使单词在该换行的地方换行

八、word-spacing

word-spacing 属性可以改变字（单词）之间的标准间隔
默认值 normal 与设置值为 0 是一样的
word-spacing: n; n为正时就加大字体间的间距，n为负的时候就减小字体间的间距
如果是单词组成的一句话，那么单词之间的距离会变化，字母之间的距离不会变化，文字也是一样的
<view class='spc'>sad sadsa 范德 萨发生 萨达</view>

九、letter-spacing

letter-spacing字母之间的间隔，文字之间的间隔
<text style='letter-spacing:1em;'>asdsadas阿萨德</text>

十、direction

direction文本的方向,并不是改变文本中内容的方向，而是改变整个文本的起始位置
<view style='direction:rtl;'>sadada收到了卡</view>从右到左
<view style='direction:ltr;'>sadada收到了卡</view>从左到右

十一、font-variant

font-variant字体变形，改变字母的大小
font-variant:normal;默认样式
<view style='font-variant:normal;'>奥萨达dkl;sAd</view>
font-variant:small-caps;小写字母变大写
<view style='font-variant:small-caps;'>奥萨达dkl;sad</view>

十二、outline

outline 边框

• outline-color 设置轮廓的颜色

• outline-style 设置轮廓的样式

• outline-width 设置轮廓的宽度

• outline-color 属性
  可能的值
  属性 描述
  color_name 规定颜色值为颜色名称的轮廓颜色（比如 red）。
  hex_number 规定颜色值为十六进制值的轮廓颜色（比如 #ff0000）。
  rgb_number 规定颜色值为 rgb 代码的轮廓颜色（比如 rgb(255,0,0)）。
  invert 默认。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见。
  inherit 规定应该从父元素继承轮廓颜色的设置。

• outline-style 属性
  可能的值
  属性 描述
  none 默认。定义无轮廓。
  dotted 定义点状的轮廓。
  dashed 定义虚线轮廓。
  solid 定义实线轮廓。
  double 定义双线轮廓。双线的宽度等同于 outline-width 的值。
  groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
  ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
  inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。
  outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。
  inherit 规定应该从父元素继承轮廓样式的设置。

• outline-width 属性
  可能的值
  属性 描述
  thin 规定细轮廓。
  medium 默认。规定中等的轮廓。
  thick 规定粗的轮廓。
  length 允许您规定轮廓粗细的值。
  inherit 规定应该从父元素继承轮廓宽度的设置。