css基础内容 -- 文本效果

1. 文本溢出（text-overflow）：规定应如何向用户呈现未显示的溢出内容

        被裁剪 

p.test1 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip; 
}

        呈现省略号...

p.test2 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis; 
}

 2.字换行（word-wrap）：使长文字能够被折断并换到下一行

p {
  word-wrap: break-word;
}

3.换行规矩（word-break）：指定换行规则

        此行将连字符-打断

p.test1 {
  word-break: keep-all;
}

         这些行将在任何字符处中断

p.test2 {
  word-break: break-all;
}

 

4.书写模式（writing-mode）：规定文本行是水平放置还是垂直放置

         水平放置 

p.test1 {
  writing-mode: horizontal-tb; 
}

 

        混合放置

span.test2 {
  writing-mode: vertical-rl; 
}
...
<p>Some text with a span element with a <span class="test2">vertical-rl</span> writing-mode.</p>

         垂直放置

p.test2 {
  writing-mode: vertical-rl; 
}

学习地址：CSS 文本效果 (w3school.com.cn)