CSS文本属性整理

1.CSS文本超出隐藏并显示省略号

内容为1行时: 

overflow:hidden;           // 超出的文本隐藏
text-overflow: ellipsis;   // 溢出用省略号显示
white-space: nowrap;       // 溢出不换行

内容为2行时: 
overflow: hidden;
text-overflow : ellipsis;
display : -webkit-box;         //作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical;  //设置伸缩盒子的子元素排列方式: 从上到下垂直排列
-webkit-line-clamp: 2;         //显示的行数
 

2.关于文本的CSS整理: 

• text-indent 属性规定文本块中首行文本的缩进。

  CSS1属性
  length	定义固定的缩进。默认值：0。
  %	定义基于父元素宽度的百分比的缩进。
  inherit	规定应该从父元素继承 text-indent 属性的值。
  注意： 负值是允许的。如果值是负数，将第一行左缩进。

• text-justify属性指定文本对齐设置为"justify"的理据。此属性指定应怎样对齐文本以及对齐间距。

  text-justify: auto|inter-word|inter-ideograph|inter-cluster|distribute|kashida|trim;
  CSS3 属性
  
  
  值	    描述
  auto	浏览器决定齐行算法。
  none	禁用齐行。
  inter-word	增加/减少单词间的间隔。
  inter-ideograph	用表意文本来排齐内容。
  inter-cluster	只对不包含内部单词间隔的内容（比如亚洲语系）进行排齐。
  distribute	类似报纸版面，除了在东亚语系中最后一行是不齐行的。
  kashida	通过拉伸字符来排齐内容。
  
  改变字与字之间的间距使得每行对齐：
  div{
      text-align:justify;
      text-justify:inter-word;
  }

• text-overflow属性指定当文本溢出包含它的元素，应该发生什么。

  text-overflow: clip|ellipsis|string;
  CSS3属性
  值	描述
  clip	修剪文本。
  ellipsis	显示省略符号来代表被修剪的文本。
  string	使用给定的字符串来代表被修剪的文本。

• text-shadow 属性应用于阴影文本。

  CSS3属性
  text-shadow: h-shadow v-shadow blur color;
  值	描述
  h-shadow	必需。水平阴影的位置。允许负值。
  v-shadow	必需。垂直阴影的位置。允许负值。
  blur	可选。模糊的距离。
  color	可选。阴影的颜色。

• text-transform 属性控制文本的大小写。

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

• text-wrap属性指定文本换行规则。

  text-wrap: normal|none|unrestricted|suppress;
  
  值	描述
  normal	只在允许的换行点进行换行。
  none	不换行。元素无法容纳的文本会溢出。
  unrestricted	在任意两个字符间换行。
  suppress	压缩元素中的换行。浏览器只在行中没有其他有效换行点时进行换行。

  扫描二维码关注公众号，回复： 3045385 查看本文章

• white-space属性指定元素内的空白怎样处理。

  CSS1属性
  值	描述
  normal	默认。空白会被浏览器忽略。
  pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
  nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
  pre-wrap	保留空白符序列，但是正常地进行换行。
  pre-line	合并空白符序列，但是保留换行符。
  inherit	规定应该从父元素继承 white-space 属性的值。

• word-break属性指定非CJK脚本的断行规则。

  CSS3属性
  提示:CJK脚本是中国，日本和韩国（"中日韩"）脚本。
  word-break: normal|break-all|keep-all;
  
  值	描述
  normal	使用浏览器默认的换行规则。
  break-all	允许在单词内换行。
  keep-all	只能在半角空格或连字符处换行。

• word-spacing属性增加或减少字与字之间的空白。

  CSS1属性
  值	描述
  normal	默认。定义单词间的标准空间。
  length	定义单词间的固定空间。
  inherit	规定应该从父元素继承 word-spacing 属性的值。
  注意： 负值是允许的。
  
  指定段字之间的空间，应该是30像素：
  p{ 
    word-spacing:30px;
  }

• word-wrap属性允许长的内容可以自动换行。

  CSS3属性
  word-wrap: normal|break-word;
  
  值	描述
  normal	只在允许的断字点换行（浏览器保持默认处理）。
  break-word	在长单词或 URL 地址内部进行换行。
  
  指定如果足够长得话，应该换行：
  p.test {word-wrap:break-word;}

• writing-mode 属性定义了文本在水平或垂直方向上如何排布。

  writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
  horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom
  vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left
  vertical-lr：垂直方向内内容从上到下，水平方向从左到右
  sideways-rl：内容垂直方向从上到下排列
  sideways-lr：内容垂直方向从下到上排列
  
  表格中展示了不同的书写模式：
  
  .example.Text1 span, .example.Text1 {
    writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: horizontal-tb;
  }
   
  .example.Text2 span, .example.Text2 {
    writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: vertical-lr;
  }
   
  .example.Text3 span, .example.Text3 {
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
  }
   
  .example.Text4 span, .example.Text4 {
    writing-mode: sideways-lr;
    -webkit-writing-mode: sideways-lr;
    -ms-writing-mode: sideways-lr;
  }
   
  .example.Text5 span, .example.Text5 {
    writing-mode: sideways-rl;
    -webkit-writing-mode: sideways-rl;
    -ms-writing-mode: sideways-rl;
  }