Tutorial

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

Published on January 12, 2021

Alligator.io and Matt Abrams

日本語

はじめに

開発者は、通常、Webページでテキストを折り返すことを好みます。折り返しにより、何らかの方法でテキストが制約され、デザイン上の問題が回避されます。テキストの折り返しは、横方向のスクロールも防ぐことができます。しかし、長さに関係なく、テキストブロックを同じ行に残したい場合があります。CSSのwhite-spaceプロパティを使用して、特定の要素の改行とテキスの折り返しを防ぐことができます。

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

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.

これにより、テキストを折り返すか、折り返さないかについて、いくつかのオプションが提供されます。

前提条件

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

nanoまたはVisual Studio Codeなどのお好みのコードエディター
Webブラウザ
HTMLの基礎を理解していること。チュートリアルシリーズHTMLを使用してWebサイトを構築する方法をご覧ください。

Step 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;
}

1つ目のクラスは.sammy-wrapです。これはborder-radius、background-color、border max-width、padding、およびmargin-bottomを含む6つの一般的なCSSプロパティを定義します。このクラスは、ビジュアルボックスを作成しますが、特別な折り返しプロパティを定義しません。これは、デフォルトの方法で改行することを意味します。

2つ目のクラスは.sammy-nowrap-1です。.sammy-rapと同じボックスを定義しますが、ここでは別のプロパティであるwhite-spaceを追加します。white-spaceプロパティにはさまざまなオプションがあり、これらはすべて、指定された要素内の空白の処理方法を定義します。ここでは、white-spaceをnowrapに設定しました。これにより、すべての改行が防止されます。

3つ目のクラスは.sammy-nowrap-2です。white-spaceに、overflowとtext-overflowの2つの追加プロパティを加えます。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>

1つ目のテキストブロックには標準の折り返しスタイルを割り当て、2つ目のブロックにはnowrapスタイル、3つ目のブロックにはnowrapにhiddenとellipsisスタイルを付けて割り当てました。4つ目のサンプルにはsammy-wrapを割り当てましたが、改行なしスペース（ ）をHTMLに直接挿入することにより、デフォルトの折り返しを無効にしています。1度限りの状況で改行を防ぐ必要がある場合は、改行なしスペースを使用することですばやく解決できます。

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

CSSプロパティを正常にカスタマイズして、4つの異なる方法で改行を防いだり、許可することができました。

まとめ

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

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors