CSS |文本效果
CSS 是在各种网络文档中添加样式的机制。文本效果允许我们对 HTML 文档中使用的文本应用不同类型的效果。
以下是 CSS 中可用于给文本添加效果的一些属性:
- 文本溢出
- 自动换行
- 断字
- 书写模式
让我们详细了解其中的每一项:
-
Text-Overflow: The CSS Text overflow property is a way to limit text that exceeds the width of it’s parent. It helps to specify the way to represent the portion of overflowing text which is not visible to the user.
语法:
```html element { text-overflow: clip | ellipsis; //CSS Property }
```
值:
-
clip: This is the default value for this property. This keyword value will truncate the text at the limit of the content area, therefore the truncation can happen in the middle of a character.
```html <!DOCTYPE html>
div.geek { white-space: nowrap; width: 200px; overflow: hidden; border: 1px solid #000000; font-size: 20px; text-overflow: clip; }div.geek:hover { overflow: visible; }
GeeksforGeeks
text-overflow: clip
A Computer Science portal for geeks.```输出:
![textclip]()
-
ellipsis: This will display an ellipsis (‘…’) to represent clipped text. The ellipsis is displayed inside the content area, decreasing the amount of text displayed. If there is not enough space to display the ellipsis, it is clipped.
```html <!DOCTYPE html>
div.geek { white-space: nowrap; width: 200px; overflow: hidden; border: 1px solid #000000; font-size: 20px; text-overflow: ellipsis; }div.geek:hover { overflow: visible; }
GeeksforGeeks
text-overflow: ellipsis
A Computer Science portal for geeks.```输出:
![textellip]()
-
-
Word wrap: The CSS word-wrap property defines whether the browser is allowed to line break within words when a word is too long to fit within its parent container. If a word is too long to fit within an area, it expands outside: Syntax:
```html element { word-wrap: break-word; //CSS Property }
```
示例:
```html <!DOCTYPE html>
word wrap p { width: 11em; border: 1px solid #000000; text-align: left; font-size: 20px; } p.test { word-wrap: break-word; }Without word-wrap
This paragraph contains a very long word: geeksforgeeksforgeeksforgeeksforgeeks
With word-wrap
This paragraph contains a very long word: geeks forgeeksforgeeksforgeeksforgeeks
```输出:
![wordwrap]()
-
断字:断字 CSS 属性设置是否在文本溢出内容框的地方出现换行符。它指定了换行规则。 语法:
```html element { word-break: keep-all | break-all; //CSS Property }
```
-
break-all: It is used to insert word break between any two characters to prevent word overflow. Example:
```html <!DOCTYPE html>
word-break: break-all p.geek { width: 140px; border: 1px solid #000000; word-break: break-all; text-align: left; font-size: 20px; }word-break: break-all
A computer science portal for geeks
```输出:
![break-all]()
-
keep-all: It is used to break word in default style. Example:
```html <!DOCTYPE html>
word-break: keep-all p.geek { width: 140px; border: 1px solid #000000; word-break: keep-all; text-align: left; font-size: 20px; }word-break: keep-all
A computer science portal for geeks
```输出:
![keep-up]()
-
-
Writing mode: The CSS writing-mode property specifies whether lines of text are laid out horizontally or vertically.
语法:
```html element { writing-mode: horizontal-tb | vertical-rl; //CSS Property }
```
-
horizontal-tb: This is the default value of the property i.e text is read from left to right and top to bottom. The next horizontal line is positioned below the previous line. Example:
```html <!DOCTYPE html>
writing-mode: horizontal-tb p.geek { writing-mode: horizontal-tb; font-size: 18px; }writing-mode: horizontal-tb
A computer science portal for geeks.
```输出:
![horizontal-tb]()
-
vertical-rl: In this property the text is read from right to left and top to bottom. The next vertical line is positioned to the left of the previous line. Example:
```html <!DOCTYPE html>
writing-mode: vertical-rl span.test2 { writing-mode: vertical-rl; font-size: 18px; }writing-mode: vertical-rl
computer science portal for geeks.
```输出:
![vertical-rl]()
-
版权属于：月萌API www.moonapi.com，转载请注明出处
