CSSのword-wrapプロパティとは？長い単語の折り返し設定を解説
word-wrapプロパティは、スペースを含まない長い単語やURLなどがコンテナからはみ出すのを防ぐために、行を途中で折り返して次の行へ送るためのCSSプロパティです。
主な値
- normal：通常の折り返しルールに従います（初期値）。単語の途中では改行されません。
- break-word：単語の途中でも、必要に応じて強制的に改行します。
サンプルコード
以下は、word-wrapプロパティを使った基本的な記述例です。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
border: 2px solid #000000;
}
div.b {
word-wrap: break-word;
}
</style>
</head>
<body>
<h2>word-wrap: break-word プロパティ</h2>
<div class="b">ThisisdemotextThisisdemotext:
thisisaveryveryveryveryveryverylongword. 長い単語が
次の行に折り返されて表示されます。</div>
</body>
</html>
実行結果
この例では、幅200pxのdiv要素の中に、スペースを含まない非常に長い英数字の文字列を配置しています。通常であれば、テキストはボックスの外側にはみ出してしまいますが、word-wrap: break-word; を指定することで、単語の途中であっても自動的に改行され、テキストがボックス内にきれいに収まります。
補足：overflow-wrapとの関係
word-wrapは古くから使われているプロパティですが、現在のCSS仕様では overflow-wrap という名称に置き換えられています。最新のブラウザでは両方とも同じように動作しますが、新しいコードを書く場合は overflow-wrap: break-word; の使用が推奨されています。互換性のため、両方を併記しておくのも安全な方法です。
-
CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法
writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し
-
CSSのpointer-eventsプロパティとは？使い方をコード例で解説
pointer-eventsプロパティとは CSSのpointer-eventsプロパティは、要素に対してポインターイベントが発生した際に、その要素がアクション（反応）を行うかどうかを指定するためのプロパティです。ポインターイベントは、マウスのクリック、タッチ操作、スタイラスペンなど、さまざまな入力デバイスによって発生します。 このプロパティを活用すると、リンクやボタンへのクリック・ホバー操作を無効化したり、逆に有効化したりできます。主な値は以下のとおりです。 auto：デフォルトの動作。要素が通常どおりポインターイベントに反応します。 none：要素がポインターイベントに反応しなくなります