CSS テキストの折り返しプロパティの探索: ワードラップとハイフン

CSS テキストの回り込みプロパティの探索: ワードラップとハイフン

Web デザインでは、テキストの回り込み処理は重要な問題です。テキストがコンテナの幅を超える場合は、コンテンツの読みやすさと美しさを確保するために、適切な行の折り返し方法を選択する必要があります。この記事では、CSS でよく使用される 2 つのプロパティであるワードラップとハイフンを紹介し、その使用法と効果を示す具体的なコード例を示します。

1. word-wrap 属性

word-wrap 属性は、折り返し時にテキストを処理する方法を指定するために使用されます。これには、normal と Break-word という 2 つのオプションの値があります。

• normal: デフォルト値。テキストがコンテナの幅を超えると、行は単語の間で折り返され、単語が長すぎて 1 行に完全に収まらない場合は、次の行にオーバーフローします。

サンプルコード:

<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>

効果: コンテナの幅は 200px で、テキストがコンテナの幅を超える場合、単語間で改行が行われます。

• break-word: テキストがコンテナの幅を超える場合、単語の途中に改行文字が存在しない場合でも、テキストは単語内で改行されます。

サンプル コード:

<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>

効果: コンテナーの幅は 200px で、テキストがコンテナーの幅を超えると、単語の内側で折り返されます。

2. ハイフン属性

ハイフン属性は、さまざまな言語やテキスト レイアウトのニーズに適応するためにハイフンの使用を制御するために使用されます。これには、none、manual、auto の 3 つのオプション値があります。

• none: デフォルト値。ハイフンを使用しないと、必要に応じてテキストが直接折り返されます。

サンプル コード:

<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>

効果: コンテナーの幅は 200px で、テキストがコンテナーの幅を超えると、単語は次の行に直接オーバーフローします。

• manual: 手動ハイフネーション。言語のハイフネーション規則に従って手動でハイフンを追加します。

サンプルコード:

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

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

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

効果: コンテナの幅は 200px で、テキストがコンテナの幅を超えると、言語のハイフネーション規則に従って単語が正しく分割されて表示されます。 。

• auto: 言語のハイフネーション規則に従って、ハイフンを自動的に追加します。

サンプルコード:

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

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

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

効果: コンテナの幅は 200px で、テキストがコンテナの幅を超えると、言語のハイフネーション規則に従って単語が正しく分割されて表示されます。 。

概要:

ワードラップとハイフンという 2 つの CSS プロパティを使用すると、テキストの折り返しをよりきめ細かく制御できます。 word-wrap 属性は行を折り返す方法を指定するために使用され、単語間または単語内で行を折り返すことを選択できます。hyphens 属性はハイフンの使用を制御するために使用され、ハイフンを使用しないことを選択できます。ハイフンを手動で追加するか、ハイフンを自動的に追加します。実際の Web デザインでは、テキストの特性や言語要件に応じて適切な属性値を選択し、読みやすさと組版効果を向上させることができます。

以上がCSS テキストの折り返しプロパティの探索: ワードラップとハイフンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。