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

序章

開発者は通常、Webページのテキストを折り返すのが好きです。ラッピングは、何らかの方法でテキストを制約し、デザインの問題を防ぎます。テキストの折り返しは、水平スクロールを防ぐこともできます。ただし、長さに関係なく、テキストのブロックを同じ行に残したい場合があります。 CSS空白プロパティを使用して、特定の要素の改行やテキストの折り返しを防ぐことができます。

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

メダカの縞模様のメダカは、ブレニーサンマのスレッドセイルベルーガチョウザメを有罪とします。インドのmulmoracisco masuサーモン、ルースターフィッシュメジロザメロングノーズランセットフィッシュブルーフィッシュレッドスナッパーサクラメントスプリットテールジャイアントダニオ。

これにより、テキストを折り返すかどうかを指定するためのいくつかのオプションが提供されます。

前提条件

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

nanoやVisualStudioCodeなどの任意のコードエディター
Webブラウザ
HTMLの基礎に慣れている。チュートリアルシリーズHTMLを使用してWebサイトを構築する方法の概要をご覧ください。

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

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

まず、nanoまたはお好みのエディターを使用して、main.cssという名前の新しいファイルを作成して開きます。

nano main.css

次のコンテンツを追加します。これにより、white-spaceを含むいくつかのプロパティを使用する3つのCSSクラスが導入されます。

./main.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と2つの追加プロパティoverflowとtext-overflowが追加されます。 overflowプロパティは、scrollable overflowを処理します。これは、要素内のコンテンツがその要素のエッジを超えた場合に発生します。 overflowプロパティは、そのコンテンツをスクロール可能、表示、または非表示にすることができます。 overflowをhiddenに設定してから、text-overflowプロパティを使用してさらにカスタマイズを追加します。 text-overflowは、追加のテキストが非表示のままであることをユーザーに通知するのに役立ちます。これをellipsisに設定したので、行が途切れたり、ボックスを超えたりすることはありません。 CSSはオーバーフローを非表示にし、非表示のコンテンツを...で通知します。

ファイルを保存して閉じます。

これでスタイルシートができたので、サンプルテキストを含む短いHTMLファイルを作成する準備が整いました。次に、ブラウザにWebページをロードし、CSSがどのように改行を防ぐことができるかを調べます。

ステップ2—HTMLファイルを作成する

CSSクラスを定義したら、それらをいくつかのサンプルテキストに適用できます。

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

nano index.html

次のコンテンツを追加します。これにより、main.cssがstylesheetとして関連付けられ、クラスがサンプルテキストブロックに適用されます。

./index.html

<!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>

標準の折り返しスタイルを最初のテキストブロックに割り当て、nowrapスタイルを2番目に割り当て、nowrapをhidden、ellipsisを3番目に割り当てました。。 4番目のサンプルにsammy-wrapを割り当てましたが、HTMLに改行なしスペース（ ）を直接挿入することにより、デフォルトのラッピングをオーバーライドしています。 1回限りの状況として改行を防ぐ必要がある場合は、改行しないスペースを使用すると、迅速な解決策を提供できます。

Webブラウザでindex.htmlを開き、結果を表示します。 4つのテキストブロックは次のように表示されます。

メダカの縞模様のメダカは、ブレニーサンマのスレッドセイルベルーガチョウザメを有罪とします。インドのmulmoracisco masuサーモン、ルースターフィッシュメジロザメロングノーズランセットフィッシュブルーフィッシュレッドスナッパーサクラメントスプリットテールジャイアントダニオ。

CSSプロパティを正常にカスタマイズして、4つの異なる方法で改行を防止または許可しました。

結論

このチュートリアルでは、CSSを使用して、テキストブロックの改行を防ぎました。ボックス内のテキストのスタイルを設定してから、white-spaceプロパティを追加して、デフォルトのテキストの折り返しを上書きしました。テキストの折り返しと空白の処理の詳細については、空白のCSSプロパティ全体を調べることを検討してください。