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

CSS3のword-breakプロパティで改行ルールを指定する方法

CSS3で改行（ワードブレイク）のルールを指定するには、word-breakプロパティを使用します。このプロパティは、テキストがコンテナの幅を超えた場合に、どのように行を折り返すかを制御するものです。

word-breakプロパティに指定できる主な値は以下のとおりです。

  • normal：デフォルトの改行規則に従います。日本語や中国語などのCJK言語では任意の位置で改行されますが、英語などの欧文ではスペースやハイフンがある箇所でのみ改行されます。
  • break-all：言語に関係なく、任意の文字の間で改行を許可します。英語のような単語の途中でも強制的に折り返されるため、幅の狭いコンテナで長い英単語を表示したい場合に便利です。
  • keep-all：CJK言語（日本語・中国語・韓国語）のテキストでは改行を禁止し、スペースやハイフンなどの記号がある箇所でのみ改行を許可します。
  • break-word：単語の途中でも必要に応じて改行します。なお、この値は現在非推奨であり、代わりにoverflow-wrap: break-wordの使用が推奨されています。

以下は、CSS3を使って改行ルールを指定するコード例です。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
span {
    display: inline-block;
    font-weight: bold;
    font-size: 20px;
    margin-right: 20px;
}
div {
    width: 50px;
    border: 3px solid #3008c0;
    margin: 10px;
    padding: 10px;
    font-size: 18px;
    display: inline-block;
    margin-right: 20px;
}
.normal {
    word-break: normal;
}
.break-all {
    word-break: break-all;
}
.break-word {
    word-break: break-word;
}
</style>
</head>
<body>
<h1>Word Breaking Rules Example</h1>
<span>NORMAL </span> <span>BREAK ALL</span> <span>BREAK WORD</span>
<br />
<div class="normal">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div class="break-all">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div class="break-word">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

CSS3のword-breakプロパティで改行ルールを指定する方法

この例では、同じテキストを含む3つのボックスに対して、それぞれ異なるword-breakの値を適用しています。normalでは単語の区切りでのみ改行され、break-allでは文字ごとに強制的に改行され、break-wordでは単語の途中でも必要に応じて改行されることが確認できます。

  1. CSS3のtransformで実現！要素の2D変換の基本と使い方

    2D変換とは？CSS3の2D変換（2D Transform）は、translate（移動）、rotate（回転）、scale（拡大・縮小）、skew（傾斜）などの関数を使って、HTML要素の位置や形状を自由に変更できる機能です。これらの変換を組み合わせることで、従来はJavaScriptが必要だった視覚効果を、CSSだけで手軽に実現できます。主な2D変換関数一覧No.値と説明1matrix(n,n,n,n,n,n)6つの値を指定して、行列による変換を定義します。2translate(x,y)X軸・Y軸の両方向に沿って要素を移動させます。3translateX(n)X軸方向に沿って要素を移動させ

  2. PythonでWordCloud（ワードクラウド）を作成する方法

    このチュートリアルでは、テキストファイルとマスク画像を用意し、そこからワードクラウド（Word Cloud）を生成して png 形式の画像として保存するプログラムをPythonで作成します。 この処理を実装するには、以下のPythonライブラリが必要です。 ・matplotlib ・wordcloud ・numpy ・tkinter ・PIL ライブラリのセットアップ まず、必要なライブラリを次のコマンドでインストールします。 $ sudo pip3 install matplotlib $ sudo pip3 install wordcloud $ sudo apt-get install