CSS文本效果属性
Property Description
text-justify Specifies how justified text should be aligned and spaced
text-overflow Specifies how overflowed content that is not displayed should be signaled to the user
word-break Specifies line breaking rules for non-CJK scripts
word-wrap Allows long words to be able to be broken and wrap onto the next line
writing-mode Specifies whether lines of text are laid out horizontally or vertically

1. 文本对齐(text-justify)

text-justify指定两端对齐文本的对齐和间隔方式

语法：

text-justify: auto|inter-word|inter-character|none|initial|inherit;

属性值

Value Description Demo
auto The browser determines the justification algorithm Play
inter-word Increases/Decreases the space between words Play
inter-character Increases/Decreases the space between characters Play
none Disables justification methods Play
initial Sets this property to its default value.Read about initial. Play
inherit Inherits this property from its parent element.Read about inherit.

2. 文本溢出(Text Overflow)

text-overflow属性指定应如何向用户发出未显示的溢出内容的信号。

语法

text-overflow: clip|ellipsis|string|initial|inherit;

属性值

Value Description Demo
clip Default value. The text is clipped and not accessible Play
ellipsis Render an ellipsis ("...") to represent the clipped text Play
string Render the given string to represent the clipped text
initial Sets this property to its default value. Read about initial.
inherit Inherits this property from its parent element. Read about inherit.

3. 断字(Word Breaking)

Word Breaking属性指定单词在到达行尾时应如何断开。

语法

word-break: normal|break-all|keep-all|break-word|initial|inherit;

属性值

Value Description Demo
normal Default value. Uses default line break rules
break-all To prevent overflow, word may be broken at any character Play
keep-all Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as value "normal" Play
break-word To prevent overflow, word may be broken at arbitrary points Play
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

4. 自动换行(Word Wrapping)

word-wrap属性允许长单词能够被打破并换行到下一行。

语法

word-wrap: normal|break-word|initial|inherit;

属性值

Value Description Demo
normal Break words only at allowed break points. This is default Play
break-word Allows unbreakable words to be broken Play
initial Sets this property to its default value. Read about initial.
inherit Inherits this property from its parent element. Read about inherit

5. 写作模式(Writing Mode)

writing-mode属性指定文本行是水平布局还是垂直布局。

语法

writing-mode: horizontal-tb|vertical-rl|vertical-lr;

属性值

Value Description Demo
horizontal-tb Let the content flow horizontally from left to right, vertically from top to bottom Play
vertical-rl Let the content flow vertically from top to bottom, horizontally from right to left Play
vertical-lr Let the content flow vertically from top to bottom, horizontally from left to right Play

标签 css