CSSでテキストが折り返されないようにする方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSでテキストが折り返されないようにする方法

青灯夜游

Jan 06, 2021 am 10:44 AM

css

CSS では、white-space 属性を使用してテキストの折り返しを防ぐことができます。テキストを含む要素に「white-space: nowrap;」スタイルを追加するだけです。ホワイトスペース属性は、要素内のホワイトスペースの処理方法を指定するために使用されます。値が nowrap に設定されている場合、テキストは折り返されません。

CSSでテキストが折り返されないようにする方法

#このチュートリアルの動作環境: Windows 7 システム、css1 バージョン、Dell G3 コンピューター。

チュートリアルの推奨事項: css ビデオチュートリアル

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

css 空白属性

空白属性は、要素内の空白を処理する方法を指定します。

CSSでテキストが折り返されないようにする方法

属性値:

normal: デフォルト値。空白はブラウザによって無視されます。
pre: 空白はブラウザによって保持されます。これは、HTML の
```
 タグのように動作します。 
```
ログイン後にコピー
nowrap: テキストは折り返されません。テキストは、
タグが見つかるまで同じ行に続きます。
pre-wrap: 空白シーケンスを保持しますが、行は通常どおり折り返されます。
pre-line: 空白シーケンスを結合しますが、改行は保持します。

例:white-space:nowrap は通常と同じで、スペースも結合しますが、コンテナのサイズに応じて折り返されず、行の折り返しがないことを示します。

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

ログイン後にコピー

レンダリング:

CSSでテキストが折り返されないようにする方法

white-space: nowrap を使用すると、テキストが折り返されなくなります。オーバーフローやテキストと一緒によく使用されます。

.wscont{
     margin:12px;
     padding:12px;
     width:300px;
     background: #f1f1f1;
     border:1px solid  #bababa;
     line-height:32px;
     font-size: 15px;
     font-family:  "微软雅黑" ;
     white-space:nowrap;
     overflow:hidden;
     text-overflow: ellipsis;
}
 
<div class= "wscont" >
     妹纸前端测试white-space属性,
     white-space属性的keywrod值。
</div>

ログイン後にコピー

効果は次のとおりです:

CSSでテキストが折り返されないようにする方法

この効果は、ページレイアウト、特にモバイルレイアウトで頻繁に使用されます。

プログラミング関連の知識について詳しくは、プログラミング教育をご覧ください。！

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

このウェブサイトの声明

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

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7469

CakePHP チュートリアル

1376

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

ブートストラップボタンの使用方法 Apr 07, 2025 pm 03:09 PM

ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

ブートストラップの日付を表示する方法 Apr 07, 2025 pm 03:03 PM

回答：ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順：ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップの日付を確認する方法 Apr 07, 2025 pm 03:06 PM

ブートストラップの日付を確認するには、次の手順に従ってください。必要なスクリプトとスタイルを紹介します。日付セレクターコンポーネントを初期化します。 Data-BV-Date属性を設定して、検証を有効にします。検証ルール（日付形式、エラーメッセージなどなど）を構成します。ブートストラップ検証フレームワークを統合し、フォームが送信されたときに日付入力を自動的に検証します。