CSSで要素が折り返されないようにする方法

Web デザインでは、一部の要素の折り返しを防ぎ、すべてを 1 行で表示する必要がある場合がありますが、この場合は CSS を使用する必要があります。次に、この記事では CSS を使用して要素の折り返しを防ぐ方法を紹介します。

1. ホワイトスペース属性

ホワイトスペース属性は、要素内のスペースと改行を制御する CSS プロパティの 1 つです。ホワイトスペース属性を設定すると、要素の折り返しを防止したり、折り返しを保持したりできます。

1. 要素を折り返さないように設定する

要素内のテキストを同じ行に表示したい場合は、以下に示すように、空白属性を nowrap に設定できます。 :

div{
    white-space: nowrap;
}

上記のコードは、div 要素内のテキストが折り返されないことを意味します。

2. 改行の保持

要素内の改行を保持したい場合は、以下に示すように、空白属性を pre または pre-wrap に設定できます。

div{
    white-space: pre;
}

div{
    white-space: pre-wrap;
}

#、表示属性

空白属性に加えて、表示属性を使用して、要素が折り返されない効果を実現することもできます。表示属性には、inline と inline-block の 2 つの値が使用できます。

1.inline

以下に示すように、要素の表示属性を inline に設定して、要素とテキストを同じ行に表示します。

span{
    display: inline;
}

上記のコードは、次のことを表します。スパン要素とテキストは同じ行に表示されます。

2.inline-block

要素の表示属性を inline-block に設定します。これにより、要素とテキストが同じ行に表示されますが、幅とテキストを設定できます。以下に示すように、要素の高さ:

div{
    display: inline-block;
    width: 100px;
    height: 50px;
}

上記のコードは、div 要素とテキストが同じ行に表示され、要素の幅と高さが設定されることを意味します。

3. オーバーフロー属性

長いテキストによって要素が自動的に折り返されることがあります。要素が折り返されるのを防ぎたい場合は、オーバーフロー属性を使用できます。オーバーフロー属性には、表示と非表示の 2 つの値があります。

1.visible

要素のオーバーフロー属性をvisibleに設定します。これは、以下に示すように、要素のコンテンツが要素ボックスからオーバーフローすることが許可されることを意味します:

div{
    overflow: visible;
}

2.hidden

要素の overflow 属性を hidden に設定します。これは、以下に示すように、要素のコンテンツが要素ボックスからはみ出さないようにすることを意味します。

div{
    overflow: hidden;
}

上記は 3 つの使用方法です。要素の折り返しを防止する CSS: 空白属性、表示属性、オーバーフロー プロパティ。さまざまな状況でさまざまな方法を選択すると、Web ページでより良い表示効果を実現できます。

以上がCSSで要素が折り返されないようにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。