CSS 文字效果

  • CSS文本溢出,自动换行,换行规则和写入模式

    在本章中,您将了解以下属性:
    • text-overflow
    • word-wrap
    • word-break
    • writing-mode
  • CSS文本溢出

    CSS 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;
         }
    尝试一下
    以下示例显示了将鼠标悬停在元素上时如何显示溢出的内容:
    div.test:hover {
           overflow: visible;
         }
    尝试一下
  • CSS单词包装

    CSS word-wrap属性允许长字能够被打破并包裹到下一行。 如果某个单词太长而无法放入某个区域,则会向外扩展:
    This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
    自动换行属性允许您强制文本换行 - 即使这意味着将其拆分到单词的中间:
    This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
    p {
           word-wrap: break-word;
         }
    尝试一下
  • CSS单词换行

    CSS word-break属性指定换行规则。
    p.test1 {
           word-break: keep-all;
         }
    
         p.test2 {
           word-break: break-all;
         }
    尝试一下
  • CSS写作模式

    CSS writing-mode属性指定文本行是水平布局还是垂直布局。
    p.test1 {
           writing-mode: horizontal-tb;
         }
    
         span.test2 {
           writing-mode: vertical-rl;
         }
    
         p.test2 {
           writing-mode: vertical-rl;
         }
  • CSS文本效果属性

    下表列出CSS文本效果属性
    单位 描述
    text-align-last 指定如何对齐文本的最后一行
    text-justify 指定文本的对齐和间距
    text-overflow 指定如何向用户发出未显示的溢出内容的信号
    word-break 为非cjk脚本指定换行规则
    word-wrap 允许长单词可以被打破,并包装到下一行
    writing-mode 指定文本行是水平布局还是垂直布局
  • 相关页面

    HTML教程:HTML样式