CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのword-breakプロパティで単語に基づいた改行を実現する方法

CSSで単語に基づいてテキストを折り返すには、word-breakプロパティを使用します。このプロパティを設定することで、単語の途中で改行するかどうかなど、改行の挙動を柔軟に制御できます。

word-breakの主な値

  • keep-all：単語の途中では改行せず、空白などの位置でのみ改行します。日本語や中国語などのCJKテキストに対しても、通常の改行禁止規則が適用されます。
  • break-all：任意の文字位置での改行を許可します。長い英単語もコンテナの幅に合わせて強制的に折り返されます。

以下のコードを実行して、CSSにおけるword-breakプロパティの実際の動作を確認してみましょう。

サンプルコード

<html>
<head>
   <style>
      p.text1 {
         width: 140px;
         border: 1px solid #000000;
         word-break: keep-all;
      }
      p.text2 {
         width: 140px;
         border: 1px solid #000000;
         word-break: break-all;
      }
   </style>
</head>
<body>
   <b>単語の途中で改行しない（keep-all）：</b>
   <p class="text1">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
   <b>任意の文字で改行する（break-all）：</b>
   <p class="text2">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</body>
</html>

実行結果

CSSのword-breakプロパティで単語に基づいた改行を実現する方法

  1. CSSのword-wrapプロパティで長い行を折り返して次の行に表示する方法

    CSSの word-wrap プロパティを使用すると、要素の幅からあふれてしまう長いテキストや単語を折り返し、次の行へ自動的に送ることができます。ここでは、word-wrap プロパティの使い方をサンプルコードとともに解説します。 word-wrapプロパティとは word-wrap: break-word; を指定すると、通常なら折り返されないスペースを含まない長い英単語が、要素の幅に合わせて途中で改行されます。これにより、URLのような切れ目のない長い文字列でも、レイアウトが崩れることなく表示できます。 なお、このプロパティは現在では標準仕様として overflow-wrap という名称に

  2. CSSで垂直線（縦線）を作成する方法を解説！初心者向けにわかりやすく紹介

    CSSで垂直線（縦線）を作成したい場合、最もシンプルで一般的な方法は border-left プロパティを使うことです。要素の左側に境界線を表示し、height で高さを指定するだけで、自由な長さの垂直線を簡単に描画できます。 それでは、実際のコード例を見ていきましょう。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>