ウェブサイト検索

CSSを使用して改行を防ぐ方法

紹介

開発者は通常、ウェブページでテキストを改行するのが好きです。改行はテキストを何らかの方法で制約し、デザインの問題を防ぎます。テキストの改行は、横スクロールも防ぐことができます。しかし、時にはテキストのブロックが長さに関係なく同じ行に留まるようにしたい場合もあります。特定の要素に対してCSSのwhite-spaceプロパティを使用して、改行やテキストのラッピングを防ぐことができます。

このチュートリアルでは、同じテキストのブロックを4つの異なる方法でスタイリングします。最初は改行を使い、次に改行なしで3回スタイリングします:

メデューサフィッシュ、帯状キリフィッシュ、コンビクトブレンニー、サヨリ、スレッドセイル、ベルーガチョウザメ。インディアンマル、モラ、シスコ、マスサーモン、ルースターフィッシュ、レクイエムシャーク、ロングノーズランセットフィッシュ、ブルーフィッシュ、レッドスナッパー、サクラメントスプリッテイル、ジャイアントダニオ。

メデューサフィッシュ、帯状キリフィッシュ、コンビクトブレンニー、サヨリ、スレッドセイル、ベルーガチョウザメ。インディアンマル、モラ、シスコ、マスサーモン、ロースターフィッシュ、レクイエムシャーク、ロングノーズランセットフィッシュ、ブルーフィッシュ、レッドスナッパー、サクラメントスプリッテイル、ジャイアントダニオ。

メデューサフィッシュ、帯状キリフィッシュ、コンビクトブレンニー、サヨリ、スレッドセイル、ベルーガチョウザメ。インディアンマル、モラ、シスコ、マスサーモン、ロースターフィッシュ、レクイエムシャーク、ロングノーズランセットフィッシュ、ブルーフィッシュ、レッドスナッパー、サクラメントスプリッテイル、ジャイアントダニオ。

メデューサフィッシュ、ストライプキリーフィッシュ、コンビクトブレンニー、サヨリ、スレッドセイル、ベルーガ、チョウザメ。インディアンマル、モラ、シスコ、マスサーモン、ルースターフィッシュ、レクイエムシャーク、ロングノーズランセットフィッシュ、ブルーフィッシュ、レッドスナッパー、サクラメントスプリットテイル、ジャイアントダニオ。

これは、テキストを折り返すかどうかのいくつかのオプションを提供します。

前提条件

このチュートリアルを完了するためには、次のものが必要です:

  • お好みのコードエディタ、例えばnanoやVisual Studio Code
  • ウェブブラウザ
  • HTMLの基本に対する理解。ウェブサイトの作り方についてのチュートリアルシリーズをご覧になることで、導入を受けることができます。

ステップ1 — CSSでの改行の防止と強制

このステップでは、3つの異なるクラスを持つスタイルシートを作成します。最初のものはデフォルトの方法でテキストを改行し、2番目と3番目はテキストが改行されないように強制します。

まず、nanoや好みのエディタを使って、main.cssという新しいファイルを作成して開きます:

  1. nano main.css

以下の内容を追加してください。これは、white-spaceを含むいくつかのプロパティを使用する3つのCSSクラスを紹介します。

.sammy-wrap {
    border-radius: 6px;
    background-color: aliceblue;
    border: 2px dashed gray;
    max-width: 70%;
    padding: 1em;
    margin-bottom: .4em;
}
.sammy-nowrap-1 {
    border-radius: 6px;
    background-color: aliceblue;
    border: 2px dashed gray;
    max-width: 70%;
    padding: 1em;
    margin-bottom: .4em;
    white-space: nowrap;
}
.sammy-nowrap-2 {
    border-radius: 6px;
    background-color: aliceblue;
    border: 2px dashed gray;
    max-width: 70%;
    padding: 1em;
    margin-bottom: .4em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

あなたの最初のクラスは .sammy-wrap です。このクラスは、border-radius、background-color、border max-width、padding、および margin-bottom を含む6つの一般的なCSSプロパティを定義します。このクラスは視覚的なボックスを作成しますが、特別なラッピングプロパティは定義していません。つまり、行はデフォルトの方法で折り返されます。

あなたの2番目のクラスは .sammy-nowrap-1 です。これは .sammy-wrap と同じボックスを定義しますが、今回は別のプロパティ white-space を追加します。white-space プロパティには多くのオプションがあり、すべてが特定の要素内の空白をどのように扱うかを定義します。ここでは、white-space を nowrap に設定しており、これによりすべての改行が防止されます。

あなたの3番目のクラスは.sammy-nowrap-2です。これはwhite-spaceと、overflowおよびtext-overflowの2つの追加プロパティを加えます。overflowプロパティは、要素内のコンテンツがその要素の端を超えたときに発生するscrollable overflowを扱います。overflowプロパティは、そのコンテンツをスクロール可能、表示可能、または非表示にすることができます。あなたはoverflowをhiddenに設定し、さらにカスタマイズするためにtext-overflowプロパティを使用しています。text-overflowは、ユーザーに追加のテキストが隠れていることを知らせるのに役立ちます。あなたはこれをellipsisに設定したので、今や行はボックスを超えて折り返したり伸びたりすることはありません。CSSはオーバーフローを隠し、隠れたコンテンツに...で信号を送りません。

ファイルを保存して閉じてください。

スタイルシートが用意できたので、サンプルテキストを含む短いHTMLファイルを作成する準備が整いました。それから、ブラウザでウェブページをロードし、CSSがいかにして改行を防ぐかを検証します。

ステップ 2 — HTML ファイルの作成

CSSクラスが定義されたら、それらをサンプルテキストに適用できます。

index.htmlというファイルを好みのエディタで作成して開いてください。main.cssと同じフォルダに配置するようにしてください:

  1. nano index.html

以下の内容を追加して、main.cssをあなたのスタイルシートとして関連付け、サンプルテキストブロックにあなたのクラスを適用します:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>How To Prevent Line Breaks with CSS</title>
<link href="main.css" rel="stylesheet">
</head>

<body>
<p class="sammy-wrap"    > Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>

<p class="sammy-nowrap-1"> Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>

<p class="sammy-nowrap-2"> Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>

<p class="sammy-wrap"    > Medusafish&nbsp;banded&nbsp;killifish&nbsp;convict&nbsp;blenny&nbsp;saury&nbsp;threadsail&nbsp;beluga&nbsp;sturgeon.&nbsp;Indian&nbsp;mul&nbsp;mora&nbsp;cisco&nbsp;masu&nbsp;salmon,&nbsp;roosterfish&nbsp;requiem&nbsp;shark&nbsp;longnose&nbsp;lancetfish&nbsp;bluefish&nbsp;red&nbsp;snapper&nbsp;Sacramento&nbsp;splittail&nbsp;giant&nbsp;danio.</p>
</body>
</html>

あなたは、最初のテキストブロックに標準のラッピングスタイルを割り当て、2番目にnowrapスタイルを、3番目にはnowrapでhiddenかつellipsisスタイルを割り当てました。4番目のサンプルにはsammy-wrapを割り当てていますが、HTMLにノンブレークスペース（&nbsp;）を直接挿入することでデフォルトのラッピングを上書きしています。もし特定の状況で折り返しを防ぐ必要がある場合、ノンブレークスペースは迅速な解決策を提供します。

ウェブブラウザで index.html を開き、結果を確認してください。あなたの4つのテキストブロックはこのように表示されます:

メデューサフィッシュ、帯状キリフィッシュ、コンビクトブレンニー、サヨリ、スレッドセイル、ベルーガチョウザメ。インディアンマル、モラ、シスコ、マスサーモン、ルースターフィッシュ、レクイエムシャーク、ロングノーズランセットフィッシュ、ブルーフィッシュ、レッドスナッパー、サクラメントスプリッテイル、ジャイアントダニオ。

メデューサフィッシュ、帯状キリフィッシュ、コンビクトブレンニー、サヨリ、スレッドセイル、ベルーガチョウザメ。インディアンマル、モラ、シスコ、マスサーモン、ロースターフィッシュ、レクイエムシャーク、ロングノーズランセットフィッシュ、ブルーフィッシュ、レッドスナッパー、サクラメントスプリッテイル、ジャイアントダニオ。

メデューサフィッシュ、帯状キリフィッシュ、コンビクトブレンニー、サヨリ、スレッドセイル、ベルーガチョウザメ。インディアンマル、モラ、シスコ、マスサーモン、ロースターフィッシュ、レクイエムシャーク、ロングノーズランセットフィッシュ、ブルーフィッシュ、レッドスナッパー、サクラメントスプリッテイル、ジャイアントダニオ。

メデューサフィッシュ、ストライプキリフィッシュ、受刑者ブレニー、サヨリ、スレッドセイル、ベルーガチョウザメ。インディアンマル、モラ、シスコ、マスサーモン、ルースターフィッシュ、レクイエムシャーク、ロングノーズ、ランセットフィッシュ、ブルーフィッシュ、レッドスナッパー、サクラメントスプリットテイル、ジャイアントダニオ。

あなたは、異なる4つの方法で行の折り返しを防ぐか許可するために、CSSプロパティを正常にカスタマイズしました。

結論

このチュートリアルでは、CSSを使用してテキストのブロックで改行を防ぐ方法を説明しました。ボックス内のテキストにスタイルを適用し、その後、デフォルトのテキストの折り返しを無効にするためにwhite-spaceプロパティを追加しました。テキストの折り返しやホワイトスペースの取り扱いについてさらに学びたい場合は、white-space CSSプロパティ全体を探求してみてください。

関連記事: