はじめに

CSSには文字組に関わるプロパティが多くありますが、それでも満足のいく文字組を実現するには難しいケースが多々あります。しかし、さまざまな新機能の提案が行われており、それらをブラウザが実装することで改善されてきました。

そういったものの一つにtext-wrapがあります。今回はこのtext-wrapについて紹介します。

text-wrapプロパティについて

text-wrapプロパティは、その名のとおり、テキストの折り返しに関するプロパティです。

これまでできなかった折り返し処理を実現できるようになり、「どうにかならないものか」と思っていた文字組に対しての解決策のひとつになります。

text-wrapプロパティ自体はCSS Text Module Level 3の初期に存在していましたが、Level 3では最終的に廃止されました。現在はLevel 4の仕様に掲載されています。

• CSS Text Module Level 4

そして昨年（2023年）からブラウザの実装が進んでおり、Google ChromeなどのBlink系ブラウザ、Firefoxを代表とするGecko系ブラウザでは、一部機能が安定版に実装されています。

SafariのWebkitではプレビュー版のみとなっていますが、もうすぐ安定版に実装されるでしょう。

text-wrapはtext-wrap-styleとtext-wrap-modeという2つのプロパティの値を同時に指定できるのですが、そのうちtext-wrap-modeプロパティと、その値であるwrapとnowrapはSafari 17.4安定版に実装されました。

それでは、text-wrapプロパティの各値がどのようなものか順に見ていきましょう。

text-wrap: wrap 並びに nowrap

text-wrapプロパティのもっとも基本的な値はwrapであり、初期値です。これはテキストが要素の幅を超えた際に折り返すように指定する値です。

反対に、nowrapはテキストが要素の幅を超えた際に折り返さないように指定する値です。

この2つはわかりやすいのですが、簡単なデモを作って確認してみましょう。

<h2>wrap</h2>

<p class="wrap">
  このテキストは折り返されます。このテキストは折り返されます。このテキストは折り返されます。<br>
  このテキストは折り返されます。このテキストは折り返されます。このテキストは折り返されます。
</p>

<h2>nowrap</h2>

<p class="nowrap">
  このテキストは折り返されません。このテキストは折り返されません。このテキストは折り返されません。<br>
  このテキストは折り返されません。このテキストは折り返されません。このテキストは折り返されません。
</p>

CSSは次のようになります。始めのテキストにはwrapを、次のテキストにはnowrapを指定しています。

p {
  width: 300px;
  background-color: #ffa494;
}

.wrap {
  text-wrap: wrap;
}

.nowrap {
  text-wrap: nowrap;
}

次のデモはGoogle Chromeで閲覧してください。

指定どおり、wrapは折り返し、nowrapは折り返さないようになっています。

しかしながら、「折り返し指定にはwhite-spaceプロパティがあるじゃないか」と思われた方もいるでしょう。

この答えとしては「white-spaceプロパティはtext-wrapプロパティのショートハンドでもある」というものになります。

正確にはtext-wrap-modeとtext-wrap-styleの2つのプロパティ値に加え、white-space-collapseプロパティの値をまとめて指定できるショートハンドプロパティがwhite-spaceです。

とはいえ、white-space-collapseの実装があるのはChromeのみです。Safariは一部に対応。Firefoxは未対応です。 また、text-wrapがtext-wrap-modeとtext-wrap-styleのショートハンドとして指定できるブラウザもありません。

どちらも遠くないうちに実装されるでしょうが、現状としては折り返すかどうかの指定はこれまでどおりwhite-spaceプロパティで行い、次節以降に紹介する折り返しスタイルの指定のみをtext-wrapプロパティで行う、という使い分けになるでしょう。

text-wrap: balance

このbalance値は、多くの人に望まれていた機能かもしれません。提案自体は意外と古くからありました。

balance値は、テキストの折り返しを行う際に、各行が均等な長さになるように調整する値です。仕様に記載されている説明は、均等化処理としては、各行の余白が同じになるように調整することで各行の長さを均等化するというものです。処理の内容自体はユーザーエージェント依存です。

デモを見てみましょう。HTMLの構造は前節のデモと同じです。CSSは次のようになります。こちらは、始めのテキストにはbalanceを、次のテキストには比較としてwrapを指定しています。

p {
  width: 300px;
  background-color: #ffa494;
  resize: both;
  overflow: auto;
}

.balance {
  text-wrap: balance;
}

.wrap {
  text-wrap: wrap;
}

デモはGoogle ChromeまたはFirefoxで閲覧してください。

p要素（オレンジ色部分）は、右隅をドラッグしてリサイズ可能にしてありますので、幅を変えてみてください。

balanceは、wrapとは異なる折り返し処理が行われているのがわかります。また、要素の幅が変わって行数が変わったとしても、各行が均等な幅として調整されます。

text-wrap: balanceの使用場面としては、中央寄せのテキストがもっともわかりやすいでしょう。中央寄せのテキストは、均等化されない場合に最後の1行の長さが短くなりがちで、読みやすさや見た目の良さを損なっていました。

テキスト主体ページの見出しやリード文、プルクオートなど、中央寄せの場面はあります。そのような場面でtext-wrap: balanceを使い、見た目の良さを向上させることができるでしょう。

中央寄せの例としてはCodeGridウェブ版の見出しがあります。ChromeのDevToolsで見てみると、text-wrap: balanceが使われていることがわかります。

中央寄せ以外の使い道としては、ヒーローイメージの隣に配置されるコピーテキストなどと相性がよさそうです。どちらにせよ、本文に使うものではなく、目立たせたい部分に使うことが多いでしょう。

text-wrap: pretty

prettyという値は少し説明が難しいのですが、より良いレイアウトになるようにユーザーエージェントが調整してくれる機能です。基本的にはwrapと同じ動作をしますが、最後の1行が極端に短くなることを避けるように調整されます。

日本語の場合、1文字と句読点だけの行が発生することがありますが、それを避けるように調整されます。

仕様では、パフォーマンスよりもレイアウト調整を重視するということが書かれています。

ブラウザはテキストを表示する際に、ページのボックスにテキストをそのまま流し込むのですが、そうなると最後の1行が極端に短くなることがあります。これを調整するにはテキストの長さなどもチェックしなくてはなりませんので、ただ流し込むよりもコストがかかります。

そういったコストを支払ってでも、見た目の美しさを優先できるのがpretty値です。

デモを見てみましょう。このデモも、最初のデモとHTMLは同様です。CSSは次のようになります。こちらは、始めのテキストにはprettyを、次のテキストには比較としてwrapを指定しています。

p {
  width: 34em;
  background-color: #ffa494;
  resize: both;
  overflow: auto;
}

.pretty {
  text-wrap: pretty;
}

.wrap {
  text-wrap: wrap;
}

デモはGoogle Chromeで閲覧してください。

同じ幅が指定されているにもかかわず、prettyとwrapで折り返し位置が異なっていることがわかります。prettyでは最後の1行が2文字と句点になっていますが、wrapでは最後の1行が1文字と句点になっています。

このような処理が行われることで見た目の向上が期待できます。ただし、この処理はユーザーエージェント依存のため、ブラウザによっては違う結果になる可能性はあります。それでも、段落のバランスとしてはよくなることでしょう。

使用場面としては通常の本文が適していると考えられます。CodeGridウェブ版の本文にも採用されています。

text-wrap: stable

stableはこれまでの値と違って、ユーザーの編集に関連する値です。

具体的には、ユーザーがテキストを編集する際に編集している行より前の行が静的に保たれるようになります。編集位置より後ろの部分が、それより前の部分の折り返し位置に影響しないようにするといったものです。

現在、安定版で実装されている環境はありません。Firefoxは「対応している」となっていますが、実験的実装のため、値を認識はするもののauto値と同じ動作になっています。

Safari TP（Technology Preview）では有効になっていますので、そちらで動作確認ができます。

このデモにはcontenteditable属性が付与されていますので、p要素（オレンジ色）部分をクリックすると、テキストの編集が可能です。

そこで、最後の行の句点の前に文字を入力すると、未対応の環境では「う」が前の行に移動してしまいます。stable値が有効な環境では、「う」がそのままの位置で編集でき、編集が終わってフォーカスが外れた段階で「う」が前の行に移動します。

次のスクリーンショットは、stable値が有効なSafari TP（Safari17.4）での動作を示しています。

stable値はWYSIWYGエディタなどで効果を発揮するでしょう。

まとめ

text-wrapプロパティは、新しく使えるようになったプロパティです。サポート状況は完全とはいえませんが、かなり進んでいることは間違いありません。

特にbalance値とpretty値は、近いうちに主要ブラウザ環境では問題なく使えるようになるでしょう。この2つは見た目の向上に寄与することが期待できます。

「もうちょっとどうにかできたらいいのに」を実現できるtext-wrapプロパティは、業務でもプライベートでも、文字組に気を遣いたいサイトをつくる際に出番があることでしょう。

次回は、また別の文字組に関するプロパティを紹介します。