ホームページ > 記事 > ウェブフロントエンド > CSSで改行しないように制御する方法

CSSで改行しないように制御する方法

藏色散人オリジナル: 2021-04-19 09:07:0815908ブラウズ

CSS の非破壊を制御する方法: 最初に HTML サンプルファイルを作成し、次に本文にテキストコンテンツを定義し、最後に CSS の空白属性の値を nowrap に設定して、CSS を制御します。テキストの改行なし。

CSSで改行しないように制御する方法

#この記事の動作環境: Windows 7 システム、Dell G3 コンピューター、HTML5&&CSS3 バージョン。

CSS では、white-space 属性を使用してテキストを折り返さずに表示できます。white-space 属性の値が nowrap である限り、テキストを折り返さないように強制できます。

white-space 属性は、要素内の空白を処理する方法を指定します。次の属性値があります:

normal: デフォルト。空白はブラウザによって無視されます。

pre: 空白スペースはブラウザによって保持されます。これは、HTML の

 タグのように動作します。 <p></p>nowrap: テキストは折り返されません。テキストは、<br> タグが見つかるまで同じ行に続きます。 <p></p>pre-wrap: 空白シーケンスを保持しますが、行は通常どおり折り返されます。 <p></p>pre-line: 空白シーケンスを結合しますが、改行は保持します。 <p></p>[推奨学習: <p>css ビデオ チュートリアル <a href="https://www.php.cn/course/list/12.html" target="_blank">]</a></p>例: <p><pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
p {
width: 400px;
height: 50px;
border: 1px solid red;
}
.nowrap{
white-space: nowrap;
}
</style>
</head>
<body>
<p>普通文本！！！
这是一些文本。 这是一些文本。 这是一些文本。
</p>
<p class="nowrap">强制文字不换行！！！
这是一些文本。 这是一些文本。 这是一些文本。
</p>
</body>
</html>

レンダリング:

CSSで改行しないように制御する方法

white-space 属性は、overflow 属性、text-overflow 属性と併用できます。テキストは折り返されずに使用され、余分な部分は省略記号で表示されます。

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
p {
width: 400px;
height: 50px;
border: 1px solid red;
}
.nowrap{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>
</head>
<body>
<p>普通文本！！！
这是一些文本。 这是一些文本。 这是一些文本。
</p>
<p class="nowrap">强制文字不换行！！！
这是一些文本。 这是一些文本。 这是一些文本。
</p>
</body>
</html>

レンダリング:

CSSで改行しないように制御する方法

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS画像を引用する方法次の記事：CSS画像を引用する方法

続きを見る