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	指定文本行是水平布局还是垂直布局

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

CSS文本溢出

CSS单词包装

CSS单词换行

CSS写作模式

CSS文本效果属性

相关页面