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

HTMLで改行候補の位置を示すには？<wbr>タグの使い方を解説

HTMLの<wbr>タグは、必要に応じて改行を行える「改行候補ポイント」を定義する要素です。WBRは「Word Break Opportunity（単語改行の機会）」の略で、長い英単語やURLなど、途中で折り返したいテキストに利用されます。

<wbr>タグの基本的な仕組み

通常、ブラウザはスペースやハイフンといった区切り文字がある箇所でのみ自動的に改行を行います。しかし、スペースを含まない長い文字列（URLや英数字の羅列など）は、画面幅を超えてはみ出してしまうことがあります。

こうした場合に<wbr>を挿入しておくと、ブラウザに対して「ここなら改行してもよい」という候補位置を伝えられます。実際に改行されるのは、その位置より前のテキストが表示領域に収まらないときだけなので、余分な改行が発生することもありません。

なお、<wbr>は終了タグを持たない空要素（void要素）であり、モダンブラウザであれば主要な環境すべてで問題なく動作します。

サンプルコード

次のコードを実行すると、HTMLにおける<wbr>タグの実装方法を確認できます。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML wbr Tag</title>
  </head>
  <body>
    <p>
      The browser to extend the document window beyond<wbr />
      the size of the viewing pane and the poor user must<wbr />
      scroll right.
    </p>
  </body>
</html>

実行結果のポイント

ウィンドウ幅が十分にある場合は、<wbr>の位置でも改行されず文章がそのまま表示されます。一方、ウィンドウを狭めてテキストが収まらなくなると、<wbr>を挟んだ位置で自然に折り返されることが確認できます。

まとめ

  • <wbr>は改行候補の位置を示す空要素である
  • 表示領域に収まる限り改行は発生しないため、安全に使える
  • URLや長い英字列など、区切り文字がないテキストの折り返しに特に有効
  1. Wordですべてのセクション区切りを一度に削除する方法

    Wordで文書内のすべてのセクション区切りを一括削除したい方に向けて、この記事ではステップバイステップで手順を解説します。セクション区切りが1つでも複数でも、このガイドに従えばすべてまとめて削除できます。 セクション区切りとは たとえば、2つの段落を分けて編集制限を設定したり、それぞれに異なる書式スタイルを適用したりしたい場面を考えてみましょう。段落や行の間にセクション区切りを挿入すると、それぞれが独立したセクションとして扱われるため、セクション単位で柔軟な書式設定が行えるようになります。 Microsoft Wordには、以下の種類のセクション区切りが用意されています。 次のページから開始

  2. Word文書の一部だけをパスワードでロックして保護する方法

    この記事では、Wordに標準搭載されている機能を使って、文書の一部をロックし、編集やコピーを防止する方法を詳しく解説します。テキストの一部をロックすると、パスワードを入力しない限り、その部分の書式変更や編集は一切行えなくなります。それでは、具体的な手順を見ていきましょう。 Wordでの編集制限の設定やOffice文書へのパスワード保護は、実はとても簡単です。しかし、一般的なガイドの手順に従うと、文書全体が制限対象になってしまうことがあります。場合によっては、たとえば1ページ目はユーザーに自由に編集させながら、2ページ目は編集できないようにしたいこともあるでしょう。そんなときに役立つのが、この