Css 简明教程

CSS - Text

text 指以可读和可理解的单词或字符形式书面或印刷的信息内容。文本可包括诸如书籍、文章、电子邮件、信息、网页等内容。

A text refers to a piece of written or printed information in the form of words or characters that can be read and understood. Texts can include content such as books, articles, emails, messages, web pages, etc.

给文本设置样式涉及修改其外观，使其在视觉上更吸引人或传达特定信息。本章演示了如何使用 CSS 属性处理文本。

Styling a text involves modifying its appearance to make it more visually appealing or to convey a particular message. This chapter demonstrates how to manipulate text using CSS properties.

有多种方法可以给文本设置样式。CSS 中提供的以下属性可用于设置样式：

There are several ways to style text. Following properties provided by CSS can be used for the styling purpose:

color: Sets the color of the text.
text-align Sets the alignment of the text.
text-align-last: Sets the alignment of the last line of a block of text.
direction: Sets the direction of the text of an element.
text-indent: Sets the indentation of the first line of the text.
letter-spacing: Specifies the space between the letters or characters that make up a word or text.
word-spacing: Specifies the space between the words in a text.
white-space: Controls the white space flow inside the text in an element.
text-decoration: Adds an underline, overline, and strikethrough over a piece of text.
text-decoration-skip: Determines what part of the content of the element, where text decoration is affecting, needs to be skipped.
text-decoration-skip-ink: Specifies how the overline and underline text decoration lines are drawn around glyph ascenders and descenders.
text-transform: Converts text to uppercase or lowercase letters.
text-emphasis: Applies emphasis marks to text (except spaces and control characters).
text-shadow: Adds shadow to the text.
line-break: Controls how to set the rule for a line break.
word-break: Controls how to set the rule for a word break.

CSS Text - Text Color

更改文本颜色可以增加视觉兴趣或与特定的设计方案保持一致。

Altering the color of the text can add visual interest or align with a specific design scheme.

color* 属性用于设置文本颜色。此属性的可能值如下：

The color property is used to set the color of the text. The possible values for this property are as follows:

Color Name: Example = red, blue, green.
Hexadecimal value: Example = #ff00ff.
RGB value: Example = rgb(125, 255, 0).

这是一个示例：

Here is an example:

<html>
<head>
</head>
<body>
   <h2>Text Color</h2>
      <p style = "color: blueviolet;">
         Color Name
      </p>
      <p style = "color:#ff00ff;">
         Hexadecimal value
      </p>
      <p style = "color: rgb(255,124,100);">
         RGB value
      </p>
</body>
</html>

CSS Text - Text Alignment

文本在页面上的位置或放置称为对齐方式。文本按页面的左右边距对齐。

The position or placement of text on a page is called its alignment. The text is aligned based on the left and right margins of the page.

定义文本对齐方式的 CSS 属性是 * text-align* 。它设置文本的水平对齐。

The CSS property that defines the alignment of the text is text-align. It sets the horizontal alignment of the text.

以下是可以放置在此属性中的可能值：

Following are the possible values that this property can hold:

start: Same as left, if direction is LTR and right if direction is RTL.
end: Same as right, if direction is LTR and left if direction is RTL.
left: Aligned with the left-margin.
right: Aligned with the right-margin.
center: Aligned at the center of the page.
justify: Aligned with both the margins.
justify-all: Same as justify, making the last line justified as well.
match-parent: Similar to inherit. Values of start and right taken from parent’s value and replaced by left and right.

这是一个示例：

Here is an example:

<html>
<head>
</head>
<body>
   <h2>Text Alignment</h2>
      <p style="text-align: left;">Text Left Alignment.</p>
      <p style="text-align: right;">Text Right Alignment.</p>
      <p style="text-align: center;">Text Center Alignment.</p>
      <p style="text-align: justify; border: 2px solid red; width: 200px; height: 100px;">
         Text Justify Alignment. This alignment aligns the text based on both the margins, left and right.
      </p>
</body>
</html>

CSS Text - Vertical Alignment

vertical-align 属性用来在内嵌、行内块表和表格单元格中垂直对齐文本。

The vertical-align property is used to align the text vertically in an inline, inline-block and a table cell.

vertical-align 属性可以拥有以下值：

The vertical-align property can have one of the following values:

baseline: Baseline of the element is aligned with the baseline of the parent element.
sub: Baseline of the element is lowered to the point appropriate for subscripted text.
super: Baseline of the element is raised to the point appropriate for superscripted text.
top: Top of the element’s box is aligned with the top of the line box, in the context of inline content, or with the top of the table cell in the context of tables.
text-top: Top of the element’s box is aligned with the top of the highest inline box in the line.
middle: Baseline of the element is aligned with the point defined by the baseline of the parent element plus half the x-height of the parent element’s font, in the context of inline content.
bottom: Bottom of the element’s box is aligned with the bottom of the line box, in the context of inline content, or with the bottom of the table cell in the context of tables.
text-bottom: Bottom of the element’s box is aligned with the bottom of the lowest inline box in the line.
percentage: Baseline of the element is raised or lowered by the given percentage of the value for the property line-height.
length: Baseline of the element is raised or lowered by the given length value. Negative length values are permitted for this property. A length value of 0 for this property has the same effect as the value baseline.

这是一个示例：

Here is an example:

<html>
<head>
<style>
   table,td {height:100px; width:400px; border:1px solid red;}
</style>
</head>
<body>
   <table>
   <tr>
      <td style="vertical-align: baseline">baseline</td>
      <td style="vertical-align: top">top</td>
      <td style="vertical-align: middle">middle</td>
      <td style="vertical-align: bottom">bottom</td>
      <td>
         <p>
            No vertical alignment
         </p>
      </td>
   </tr>
   </table>
   <p>
   top:         <img style="vertical-align: top" src="images/smiley.png" alt="star"/>
   middle:      <img style="vertical-align: middle" src="images/smiley.png" alt="star"/>
   bottom:      <img style="vertical-align: bottom" src="images/smiley.png" alt="star"/>
   super:       <img style="vertical-align: super" src="images/smiley.png" alt="star"/>
   sub:         <img style="vertical-align: sub" src="images/smiley.png" alt="star"/>
   </p>

   <p>
   text-top:    <img style="vertical-align: text-top" src="images/smiley.png" alt="star"/>
   text-bottom: <img style="vertical-align: text-bottom" src="images/smiley.png" alt="star"/>
   0.2em:       <img style="vertical-align: 0.3em" src="images/smiley.png" alt="star"/>
   -1em:        <img style="vertical-align: -2em" src="images/smiley.png" alt="star"/>
   20%:         <img style="vertical-align: 30%" src="images/smiley.png" alt="star"/>
   -100%:       <img style="vertical-align: -100%" src="images/smiley.png" alt="star"/>
   </p>
</body>
</html>

CSS Text - Direction

文本方向是指文档或元素中文字的朝向。它根据所使用的书写系统来确定文本是从左到右 (LTR) 显示还是从右到左 (RTL) 显示。

Text direction refers to the orientation of text characters within a document or element. It determines whether text should be displayed from left to right (LTR) or right to left (RTL) based on the writing system used.

在 CSS 中，可以使用 * direction* 属性设置文本方向。 * direction* 属性接受两个主要的值：

In CSS, you can set the text direction using the direction property. The direction property accepts two main values:

LTR (Left-to-Right): Default value, used for languages that are written from left to right, like English. You don’t need to specify this value explicitly unless you want to override an inherited right-to-left direction.
RTL (Right-to-Left): Used for languages that are written from right to left, such as Arabic or Hebrew. When using rtl, text will be aligned right by default.

此外，CSS 还有简写属性 * unicode-bidi* ，用于控制 bidi algorithm ，即指定当具有不同书写方向的字符出现在同一段落时如何显示。unicode-bidi 最常见的值是 normal ，它允许浏览器自动处理文本方向。

Additionally, CSS provides a shorthand property, unicode-bidi, to control the bidi algorithm, which specifies how characters with different writing directions are displayed when they appear in the same paragraph. The most common value for unicode-bidi is normal, which allows the browser to handle text direction automatically.

这是一个示例：

Here is an example:

<html>
<head>
</head>
<body>
   <p style = "direction: rtl;">
      Right to Left
   </p>
   <p style = "direction: ltr;">
      Left to Right
   </p>
</body>
</html>

CSS Text - With unicode-bidi

我们来看一个 unicode-bidi 使用示例：

Let us see an example for usage of unicode-bidi:

<html>
<head>
<style>
   p.example {
      direction: rtl;
      unicode-bidi: bidi-override;
   }
</style>
</head>
<body>
   <h2>Text Direction</h2>
      <p>Check for the text direction.</p>
      <p class="example">Check for the text direction.</p>
</body>
</html>

CSS Text - Text Decoration

text-decoration* 属性有助于为文本添加更多装饰，例如添加线条（下划线、删除线、上划线）以及线条的颜色、样式和粗细。

The property text-decoration helps in adding extra decoration to the text, such as, adding a line (underline, strikethrough, overline) and color, style and thickness to the line.

它是以下属性的简写属性：

It is a shorthand property to the following properties:

text-decoration-line: Sets the type of decoration line (underline, strikethrough or overline).
text-decoration-color: Sets the color to the text decoration.
text-decoration-style: Sets the style to the text decoration (dotted, dashed, solid, wavy, double, etc.)
text-decoration-thickness: Sets the thickness to the text decoration.

这是一个示例：

Here is an example:

<html>
<head>
</head>
<body>
   <h2>Text Decoration</h2>
      <p style="text-decoration: overline solid red 5px;">Overline text decoration.</p>
      <p style="text-decoration: line-through solid green 1px;">Line-through text decoration.</p>
      <p style="text-decoration: underline dashed 2pt blue;">Underline text decoration.</p>
</body>
</html>

CSS Text - Text Decoration Skip

text-decoration-skip 属性确定元素内容的哪一部分会受到文本装饰的影响，需要跳过哪些部分。

The text-decoration-skip property determines what part of the content of the element, where text decoration is affecting, needs to be skipped.

text-decoration-skip 属性可以具有以下值：

The text-decoration-skip property can have following values:

none: Skips nothing and text decoration is applied for all the text content.
objects: Skips the whole margin box of the element,such as for an image or inline-block.
spaces: Skips all spacing.
leading-spaces: Same as spaces, skipping only leading spaces.
trailing-spaces: Same as spaces, skipping only trailing spaces.
edges: Edges such as start and end of text insets slightly. Separate underlines for adjacent elements.
box-decoration: Skips the text decoration over margin, border and padding areas of a box.
initial: Sets the text-decoration-skip value to its default value (none).
inherit: Inherits the text-decoration-skip value from its parent element.
unset: Removes any previously set text-decoration-skip value.

这是一个示例：

Here is an example:

<html>
<head>
</head>
<body>
   <h2>Text Decoration Skip</h2>
      <p style="font-size:3em; text-decoration: underline solid red 5px; text-decoration-skip: edges;">Observe the edges of the line.</p>
      <p style="font-size:3em; text-decoration: underline solid green 5px; text-decoration-skip: spaces;">Its text decoration skip spaces.</p>
</body>
</html>

CSS Text - Text Decoration Skip Ink

text-decoration-skip-ink 属性指定如何绘制上划线和下划线文本装饰线，使其围绕字形或字符上肩线和下肩线。

The text-decoration-skip-ink property specifies how the overline and underline text decoration lines are drawn around glyph or character ascenders and descenders.

text-decoration-skip-ink 属性可以有以下值：

The text-decoration-skip-ink property can have following values:

none: Skips nothing and text decoration is applied for all the text content.
auto: Skips the whole margin box of the element,such as for an image or inline-block.
all: Skips all spacing. (Supported only on Firefox and Safari)

在下例中，观察字母（p、g）的下肩线和上肩线（h）如何受此属性影响：

In the following example observe how the descenders of letters (p,g) and ascender (h) get affected with this property:

<html>
<head>
</head>
<body>
   <h2>Text Decoration Skip Ink</h2>
      <p style="font-size:3em; text-decoration: underline solid red 5px; text-decoration-skip-ink: auto;">paragraph.</p>
      <p style="font-size:3em; text-decoration: underline solid green 5px; text-decoration-skip-ink: none;">paragraph.</p>
</body>
</html>

CSS Text - Text Transform

text-transform* 属性通过各种方式变换文本的外观，可以用来将文本转换为大写、小写、大写每个单词的首字母，甚至是所有字母。

The text-transform property is used to change the appearance of text by transforming it in various ways. It can be used to convert text to uppercase, lowercase, capitalize the first letter of each word, or even capitalize all letters.

text-transform 属性可以有以下值之一：

The text-transform property can have one of the following values:

lowercase: Transforms all text to lowercase.
uppercase: Transforms all text to uppercase.
capitalize: Capitalizes the first character of each word.
none: No text transformation is applied.
full-width: Transforms all characters to their full-width variant.
full-size-kana: Transforms all the small Kana characters to full-size Kana characters. This is specifically used for <ruby> annotation text.
initial: Sets the text-transform value to its default value (none).
inherit: Inherits the text-transform value from its parent element.
unset: Removes any previously set text-transform value.

这是一个示例：

Here is an example:

<html>
<head>
<style>
   div {border:2px solid red; padding: 5px; margin: 2px; width: 300px;}
   span {text-transform: full-width;}
   strong {width: 100%;}
</style>
</head>
<body>
   <h2>Text Transform</h2>
   <div>
      <p style="text-: capitalize;">Text transformed.</p>
   </div>
   <div>
      <p style="text-transform: lowercase;">Text transformed.</p>
   </div>
   <div>
      <p style="text-transform: uppercase;">Text transformed.</p>
   </div>
   <div>
      <p style="text-transform: none;">Text transformed.</p>
   </div>
   <div>
      <strong>
      <span>TRANSFORMATION OF TEXT AS FULL-WIDTH.</span>
      </strong>
   </div>
</body>
</html>

CSS Text - Text Emphasis

CSS 提供了一个使用属性 * text-emphasis* 强调文本块中标记的属性。这些标记通常用于突出显示特定内容或在某些语言中指示发音或重音。

CSS provides a property to apply emphasis marks on a block of text using the property text-emphasis. These marks are typically used to highlight specific content or to indicate pronunciation or stress in certain languages.

它允许设计者对文本块中的各个字符或短语应用强调。

It allows the designer to apply emphasis to individual characters or phrase within a block of text.

它是 * text-emphasis-style* 和 * text-emphasis-color* 的简写。

It is a shorthand for text-emphasis-style and text-emphasis-color.

text-emphasis 属性可以具有以下值之一：

The text-emphasis property can have one of the following values:

none: Sets no emphasis mark.
filled: Fills the element with solid color. Default value.
open: Sets the shape as hollow.
dot: Marks displayed as small circles, either open or filled dot.
circle: Marks displayed as large circles, either open or filled circle. Default shape in horizontal writing.
double-circle: Marks displayed as double circles, either open or filled double circle.
triangle: Marks displayed as triangles, either open or filled triangle.
sesame: Marks displayed as sesames (~), either open or filled sesame. Default shape in vertical writing.
<string>: Marks displayed as the passed string value.
<color>: Sets the color of the mark.

这是一个示例：

Here is an example:

<html>
<head>
</head>
<body>
   <h2>Text Emphasis</h2>
      <p style="text-emphasis: dot;">The emphasis is a dot.</p>
      <p style="text-emphasis: circle red;">The emphasis is a circle.</p>
      <p style="text-emphasis: triangle;">The emphasis is a triangle.</p>
      <p style="text-emphasis: none;">No emphasis to the text.</p>
      <p style="text-emphasis: double-circle green;">The emphasis is a double-circle.</p>
      <p style="text-emphasis: open;">The emphasis is open.</p>
      <p style="text-emphasis: sesame;">The emphasis is a sesame.</p>
      <p style="text-emphasis: 'u' #00ff00;">The emphasis is a string.</p>
</body>
</html>

CSS Text - Text Indentation

Indentation 是边距和文本第一行之间的空格。适当的缩进增强了页面上文本的可读性和清晰度。

Indentation is the space between the margin and the first line of text. Proper indentation enhances the readability and clarity of text on a page.

CSS 还提供了一个用来设置文本缩进的属性，该属性即为 * text-indent* 。该属性可传递以下值：

CSS also provides a property to set the text indentation and that is text-indent. The following values can be passed to this property:

length: Any specific length {pixels (px), points (pt), ems (em), etc}. Default value is 0.
percentage (%): The value passed is in relation to the percentage of the width of the parent element.
each-line: Affects the first line of a block of text along with each line after a forced line break.
hanging: Indentation is inverted, except for the first line.
initial: Sets the text-indent to its default value.
inherit: Allows to inherit the text-indent value from its parent element.

这是一个示例：

Here is an example:

<html>
<head>
</head>
<body>
   <h2>Text indentation</h2>
      <p style="text-indent: 2cm;">Text indentation at 2 cm.</p>
      <p style="text-indent: 2in;">Text indentation at 2 inches.</p>
      <p style="text-indent: 20%;">Text indentation at 20%.</p>
</body>
</html>

CSS Text - Letter Spacing

调整文本中字母之间的空格，会影响网页的可读性和整体美观性。

Adjusting the space between the letters in a text, impacts the readability and overall aesthetics of the webpage.

属性 * letter-spacing* 用于调整文本字母之间的空格。字母之间的空格可以增加或减少。

The property letter-spacing is used to adjust the space between the letters of a text. The space can either be increased or decreased between the letters.

该属性可以具有以下可能值：

Following are the possible values that this property can have:

normal: Default value and represents the normal amount of space between letters.
length: Any specific length {pixels (px), points (pt), ems (em), or percentages (%)}.
initial: Sets the letter-spacing to its default value.
inherit: Allows to inherit the letter-spacing value from its parent element.

Note ：根据使用的字体，字母之间的实际间距可能会有所不同。

Note: The actual spacing between letters may vary depending on the font being used.

这是一个示例：

Here is an example:

<html>
<head>
</head>
<body>
   <h2>Letter spacing</h2>
      <p style="letter-spacing: normal;">Letter spacing normal.</p>
      <p style="letter-spacing: 5px;">Letter spacing increased.</p>
      <p style="letter-spacing: -1px;">Letter spacing decreased.</p>
</body>
</html>

CSS Text - Word Spacing

就像 letter-spacing 一样，CSS 提供了用于调整文本中单词之间间距的属性。用于调整单词之间空格的属性是 * word-spacing* 。

CSS provides property to adjust the spacing between the words in a piece of text, just like letter-spacing. The property to adjust the space between words is word-spacing.

此属性可以采用以下值：

This property can take following values:

normal: Default value and represents the normal amount of space between words.
length: Any specific length {pixels (px), points (pt), ems (em), or percentages (%)}.
initial: Sets the word-spacing to its default value.
inherit: Allows to inherit the word-spacing value from its parent element.

这是一个示例：

Here is an example:

<html>
<head>
</head>
<body>
   <h2>Word spacing</h2>
      <p style="word-spacing: normal;">Word spacing normal.</p>
      <p style="word-spacing: 15pt;">Word spacing increased.</p>
      <p style="word-spacing: -1px;">Word spacing decreased.</p>
</body>
</html>

CSS Text - White Space

文本中的空白是指不显示任何可见符号或对文本含义没有任何影响的任何空隙或字符。

In text, white space refers to any empty space or characters that do not display a visible symbol or have any effect on the text’s meaning.

以下列举了一些你可能遇到空白的情况：

Here are some scenario where you can encounter a white space:

Leading white spaces are those appearing before the first visible character of a line, while trailing white spaces appear after the last visible character.
White space, often in the form of line breaks or paragraph breaks.
White space is frequently used for indentation purposes, particularly in programming languages or when writing structured text.
Non-breaking white space characters, such as the HTML entity nbsp ( ), can be used.
Consecutive white spaces in text are treated as a single space. For example, pressing of spacebar multiple times.

white-space 的不同值如下：

The different values for white-space are as follows:

normal: Default value, where sequences of white spaces are collapsed, and text wraps to the next line when it reaches the available width.
nowrap: White spaces are collapsed, and text does not wrap to the next line. It continues on the same line, overflowing the available width.
pre: Preserves white spaces exactly as they are in the HTML code. Line breaks and multiple white spaces are displayed as they are.
pre-wrap: Preserves line breaks and white spaces as they are in the HTML code.
pre-line: Collapses white spaces, but preserves line breaks. Text wraps when it reaches the available width.
break-spaces: Collapses sequences of white spaces, but preserves line breaks and wrap opportunities. This is an experimental value and may not be supported in all browsers.
initial: Sets the value to its default value, which is normal.
inherit: Inherits the value from its parent element.

这是一个示例：

Here is an example:

<html>
<head>
<style>
   div {border:2px solid red; padding: 5px; margin: 2px; width: 300px; height: 100px;}
</style>
</head>
<body>
   <h2>White Space</h2>
   <h4>normal</h4>
   <div>
      <p style="white-space: normal;">white space refers to any empty space or characters that do not display
      a visible symbol or have any effect on the text's meaning</p>
   </div>
   <h4>pre</h4>
   <div>
      <p style="white-space: pre;">white space refers to any empty space or characters that do not display
      a visible symbol or have any effect on the text's meaning</p>
   </div>
   <h4>nowrap</h4>
   <div>
      <p style="white-space: nowrap;">white space refers to any empty space or characters that do not display
      a visible symbol or have any effect on the text's meaning</p>
   </div>
   <h4>pre-wrap</h4>
   <div>
      <p style="white-space: pre-wrap;">white space refers to any empty space or characters that do not display
   a visible symbol or have any effect on the text's meaning</p>
   </div>
   <h4>pre-line</h4>
   <div>
      <p style="white-space: pre-line;">white space refers to any empty space or characters that do not display
      a visible symbol or have any effect on the text's meaning</p>
   </div>
   <h4>break-spaces</h4>
   <div>
      <p style="white-space: break-spaces;">white space refers to any empty space or characters that do not display
      a visible symbol or have any effect on the text's meaning</p>
   </div>
</body>
</html>

CSS Text - White Space Collapse

white-space-collapse 属性检查如何在元素内折叠空白。

The white-space-collapse property checks how to collapse the white space inside an element.

white-space* 属性是 white-space-collapse 和 text-wrap 属性的简写。

The white-space property is a shorthand for white-space-collapse and text-wrap properties.

white-space-collapse 的不同值如下：

The different values for white-space-collapse are as follows:

collapse: Sequences of white space are collapsed.
preserve: Sequences of white space and characters of segment break are preserved.
preserve-breaks: Sequences of white space are collapsed and characters of segment break are preserved.
preserve-spaces: Sequences of white space are preserved and characters of segment break and tabs are converted to spaces.
break-spaces: Similar to 'preserve'. Consecutive spaces, tabs, and line breaks will collapse into a single space, but a single space will remain as is.

CSS Text - With Shadow

text-shadow* 属性用于向文本添加阴影效果。它允许您指定阴影的 color 、 offset 、模糊半径和散布半径。

The text-shadow property is used to add a shadow effect to text. It allows you to specify the color, offset, blur-radius, and spread-radius of the shadow.

通过使用此属性，您可以创建各种文本效果，如给文本赋予 3D 或发光外观，或为文本添加强调和深度。

By using this property, you can create various text effects like giving the text a 3D or glowing appearance, or adding emphasis and depth to the text.

该属性指定 X 和 Y 偏移量、模糊半径和颜色值的组合。它不要求以固定顺序指定值。它以逗号分隔的阴影值列表形式指定。

The property specifies the combination of X and Y offsets, blur radius and color values. No fixed order of values is mandated. It is specified as a comma-separated list of shadow values.

text-shadow 属性接受以下值：

text-shadow property accepts following values:

<color>: Sets the color of the shadow. It is optional. It can be specified either before or after the offset values. Any value for color can be specified, such as, name, HEX or RGB value.
<offset-x><offset-y>: Any length value, specifying the x and y values. x value represents the shadow’s horizontal distance from text. y value represents the shadow’s vertical distance from text. If x and y values equal 0, the shadow appears behind the text.
<blur-radius> Any length value, specifying the value of blur-radius. It is optional. To make the blur look bigger, you need to provide higher value. If no value is passed, it is taken as 0.

Example

这是一个示例：

Here is an example:

<html>
<head>
</head>
<body>
   <h2>Text Shadow</h2>
      <p style="text-shadow: 2px 5px yellow;"> Simple Text shadow </p>
      <p style="text-shadow: 5px 5px 2px #ff00ff;">Text shadow with blur radius</p>
      <p style="text-shadow: 1px 1px 2px green, 0 0 1em yellow, 0 0 0.2em red;">Multiple shadows</p>
      <p style="text-shadow: 0px 0px 10px rgb(26, 69, 105); ">Text shadow with RGB colors</p>
</body>
</html>

CSS Text - Line Break

CSS 提供 * line-break* 属性，它在确定如何换行文本块方面很有用。

CSS provides property line-break that is useful in determining how to break lines in a block of text.

以下是可以使用的属性值：

Following are the values that this property can have:

auto: Default line break rule applied.
loose: Least restrictive line break rule applied.
normal: Most common line break rule applied.
strict: Most stringent line break rule applied.
anywhere: Allows the browser to apply line break rule anywhere, at any character.
initial: Set the initial value.
inherit: Inherits the value of the parent element.

这是一个示例：

Here is an example:

<html>
<head>
<style>
   p {
      border: 2px solid blue;
      width: 200px;
   }
   .normal {
      line-break: normal;
   }
   .loose {
      line-break: loose;
   }
   .strict {
      line-break: strict;
   }
   .auto {
      line-break: auto;
   }
   .anywhere {
      line-break: anywhere;
   }
</style>
</head>
<body>
   <h2>Line Break</h2>
      <p class="normal">Normal - CSS provides property <b>line-break</b> that is useful in determining how to break lines in a block of text.</p>
      <p class="loose">Loose - CSS provides property <b>line-break</b> that is useful in determining how to break lines in a block of text</p>
      <p class="strict">Strict - CSS provides property <b>line-break</b> that is useful in determining how to break lines in a block of text</p>
      <p class="auto">Auto - CSS provides property <b>line-break</b> that is useful in determining how to break lines in a block of text</p>
      <p class="anywhere">Anywhere - CSS provides property <b>line-break</b> that is useful in determining how to break lines in a block of text</p>
</body>
</html>

CSS Text - Word Break

CSS 中 * word-break* 属性用于指定在单词超出元素的可用宽度时如何断开单词或换行。它决定浏览器是否应允许在任何点处断开单词，或将单词保持在一起。

The word-break property in CSS is used to specify how words should be broken or wrapped in case they exceed the available width of an element. It determines if the browser should allow the words to break at any point or if they should be kept together.

以下是可以使用的属性值：

Following are the values that this property can have:

normal: Uses default line break rule.
break-all: Word breaks to be applied between any two characters, in order to prevent overflow.
keep-all: Word breaks not to be used for Chinese, Japanese and Korean (CJK) text; and for other languages or non-CJK text behavior is the same as for normal.
break-word: This behaves same as overflow-wrap: anywhere, i.e. word break at any word is applied. But this value is deprecated.

这是一个示例：

Here is an example:

<html>
<head>
<style>
   p {
      border: 2px solid green;
      width: 200px;
   }
   .normal {
      word-break: normal;
   }
   .all {
      word-break: break-all;
   }
   .keep {
      word-break: keep-all;
   }
   .wordbreak {
      word-break: break-word;
   }
</style>
</head>
<body>
   <h2>Word Break</h2>
      <p class="normal">normal - CSS provides property <b>word-break</b> that is useful in determining how to break words in a block of text</p>
      <p class="all">break-all - CSS provides property <b>word-break</b> that is useful in determining how to break words in a block of text</p>
      <p class="keep">keep-all - CSS provides property <b>word-break</b> that is useful in determining how to break words in a block of text</p>
      <p class="wordbreak">break-word - CSS provides property <b>word-break</b> that is useful in determining how to break words in a block of text</p>
</body>
</html>