Exploring CSS text wrapping properties: word-wrap and hyphens

Exploration of CSS text wrap properties: word-wrap and hyphens

In web design, text wrap processing is an important issue. When the text exceeds the width of the container, we need to choose an appropriate line wrapping method to ensure the readability and aesthetics of the content. This article will introduce two commonly used properties in CSS: word-wrap and hyphens, and provide specific code examples to illustrate their usage and effects.

1. word-wrap attribute

The word-wrap attribute is used to specify how text is handled when wrapping. It has two optional values: normal and break-word.

• normal: Default value. When text exceeds the width of the container, lines are wrapped between words, and if a word is too long to fit entirely on one line, it overflows to the next line.

Sample code:

<style>
.container {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.normal-text {
  word-wrap: normal;
}
</style>

<div class="container">
  <p class="normal-text">这是一段很长很长很长很长很长很长的文本。</p>
</div>

Effect: The container width is 200px, and when the text exceeds the container width, line breaks will be performed between words.

• break-word: When the text exceeds the width of the container, it will break inside the word, even if the newline character in the middle of the word does not exist.

Sample code:

<style>
.container {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.break-word {
  word-wrap: break-word;
}
</style>

<div class="container">
  <p class="break-word">这是一段很长很长很长很长很长很长的文本。</p>
</div>

Effect: The container width is 200px, and when the text exceeds the container width, it will wrap inside the word.

2. hyphens attribute

The hyphens attribute is used to control the use of hyphens to adapt to different languages ​​and text layout needs. It has three optional values: none, manual and auto.

• none: Default value. Without hyphens, text wraps directly when needed.

Sample code:

<style>
.container {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.no-hyphens {
  hyphens: none;
}
</style>

<div class="container">
  <p class="no-hyphens">这是一个没有连字符的例子。这个长长长长的单词不会被自动断行，而是直接溢出到下一行。Hyphens are not used in this example, so the long word will overflow to the next line instead of being automatically broken.</p>
</div>

Effect: The container width is 200px, and when the text exceeds the container width, the words overflow directly to the next line.

• manual: Manual hyphenation, manually add hyphens according to the language's hyphenation rules.

Sample code:

<style>
.container {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.manual-hyphens {
  hyphens: manual;
}
</style>

<div class="container">
  <p class="manual-hyphens">这是一个使用手动断字的例子。这个长长长长的单词被手动添加了连字符，使其在需要换行时正确断行显示。</p>
</div>

Effect: The container width is 200px, and when the text exceeds the container width, the words will be correctly broken and displayed according to the language's hyphenation rules.

• auto: Automatically add hyphens according to the language's hyphenation rules.

Sample code:

<style>
.container {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.auto-hyphens {
  hyphens: auto;
}
</style>

<div class="container">
  <p class="auto-hyphens">这是一个使用自动断字的例子。这个长长长长的单词会根据语言的断字规则自动添加连字符，使其在需要换行时正确断行显示。</p>
</div>

Effect: The container width is 200px, and when the text exceeds the container width, the words will be correctly broken and displayed according to the language's hyphenation rules.

Summary:

By using the two CSS properties word-wrap and hyphens, we can have more fine-grained control over the wrapping of text. The word-wrap attribute is used to specify the way to wrap lines, and you can choose to wrap lines between words or within words; the hyphens attribute is used to control the use of hyphens, and you can choose not to use hyphens, add hyphens manually, or add hyphens automatically. In actual web design, we can choose appropriate attribute values ​​according to the characteristics and language requirements of the text to achieve better readability and typesetting effects.

The above is the detailed content of Exploring CSS text wrapping properties: word-wrap and hyphens. For more information, please follow other related articles on the PHP Chinese website!