HTMLを改行せずに表示する方法

2022.04.25

HTMLにおいて「p」要素や「div」要素に横幅を指定した場合、内部に設定された文字列が横幅を超えると、自動的に改行されて表示されます。
改行が行われることで、デザインが崩れたり、横並びにしたときにバランスが崩れたりという問題が起こる場合があります。

この記事では、CSSを使って改行を禁止する方法や、それにまつわる表示のテクニックを紹介します。

要素内の文字を改行禁止にする方法

まず、何も設定しなかった場合どのような表示になるか確認してみましょう。

CSS

p {
  border: solid 1px gray;
  padding: 0.4em;
  width: 500px;
}

HTML

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

要素に設定した「500px」の横幅で改行されて表示されているのがわかります。
それでは、これを改行禁止に変更してみましょう。

もっとも簡単な改行無効化の方法は、CSSの「white-space: nowrap」を使用する方法です。
CSSを以下のように書き換えてみましょう。

CSS

p {
  border: solid 1px gray;
  padding: 0.4em;
  width: 500px;
  white-space: nowrap;
}

このように要素が改行されず、要素の外にはみ出して表示されます。

改行しない内容をうまく表示させるテクニック

今回紹介した改行禁止方法では枠からはみ出してしまうため、お世辞にも見た目が良いとは言えません。
そのため、何かしらの方法を使って改行しない文字列をコントロールする必要があります。

文字列コントロールの方法をいくつか紹介します。

テクニック1:表示しきれない部分をスクロールする

一つ目のテクニックは、はみ出した部分をスクロールする方法です。
CSSに「overflow-x: scroll」を追加してみましょう。

CSS

p {
  border: solid 1px gray;
  padding: 0.4em;
  width: 500px;
  white-space: nowrap;
  overflow-x: scroll;
}

こうすると、横にスクロールすることで全文を表示できるようになります。
横スクロールについては以下の記事で紹介しています。

https://web-camp.io/magazine/?p=104890

テクニック2:省略する

次に紹介するテクニックは、「…」を利用して表示内容を省略する方法です。
この方法を使うと全文が表示されないため注意が必要ですが、カードやカルーセルといったメニュー系の画面ではデザインを統一できるため有効なテクニックです。

省略するためには、CSSを以下のように変更します。

CSS

p {
  border: solid 1px gray;
  padding: 0.4em;
  width: 500px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

こうすることで、枠のサイズに対して改行せずにきれいに表示できます。
ただ、この方法では、省略された部分はソースを見ない限り確認することができません。

全体を表示させたい場合には?

省略された文字の全体を表示させたい場合には、「title」属性を使うことでマウスオーバー時に全文を表示させることができます。
以下のようなJavaScriptを追加することで、省略されたp要素の全文がマウスオーバーで表示されるようになります。

JavaScript

window.onload = function(){
  // p要素を検索
  document.querySelectorAll('p').forEach(function(elem) {
    // 内部要素を取得
    const text = elem.innerText;
    // tooltipとして設定
    elem.title = text;
  });
}

まとめ

HTMLを改行させないで表示する方法を紹介しました。

  • 要素内で改行しないようにする場合はCSSの「white-space: nowrap」を使う
  • 内容が要素からはみ出さないようにするテクニックには「スクロール」「省略」などがある
  • 省略された内容はJavaScriptを使うとマウスオーバーで全文表示させることができる

要素を決まった幅で表示することは画面をデザインする上で必要なことが多いです。
長い要素をどのように処理するかということもデザインに関わってくる部分ですので、状況に応じて使い分けましょう。

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2022 WEBCAMP MEDIA Powered by AFFINGER5