1. 宇宙のルール HTML コード内の空白は通常、ブラウザによって無視されます。 <p> こんにちは世界 </p> 上記は、テキストの先頭、内部、末尾に 2 つのスペースがある HTML コード行です。 ブラウザの出力は次のようになります: hello world ご覧のとおり、テキストの先頭と末尾のスペースは無視され、内部の連続したスペースは 1 つとしてカウントされます。これはブラウザがスペースを処理する基本的なルールです。 スペースをそのまま出力したい場合は、<pre> タグを使用します。 <pre> こんにちは世界 </pre> 別の方法としては、代わりに HTML エンティティを使用してスペースを表すことです。 <p> こんにちは世界 </p> 2. スペース文字 HTML の空白処理ルールは多くの文字に適用されます。通常のスペースバーに加えて、タブ (t) と改行 (r と n) も含まれます。 ブラウザはこれらの記号を通常のスペースキーに自動的に変換します。 <p>こんにちは 世界</p> 上記のコードでは、テキストに改行が含まれており、ブラウザはそれをスペースとして扱います。出力は次のようになります: hello world したがって、テキスト内の改行は効果がありません (テキストが <pre> タグで囲まれていない限り)。 <p>こんにちは<br>世界</p> 上記のコードは タグは明示的に改行を示す 3. CSSの空白プロパティ HTML 言語のスペース処理は基本的に直接フィルタリングです。これはあまりにも粗雑な扱いであり、元のテキスト内のスペースが意味を持つ可能性があるという事実を完全に無視しています。 CSS には、スペースをより正確に処理できる空白プロパティが用意されています。この属性には 6 つの値があり、共通の inherit (親要素を継承) を除いて、残りの 5 つの値を以下に紹介します。 3.1 空白: 通常 white-space プロパティのデフォルト値は normal です。これは、ブラウザーが空白を通常の方法で処理することを意味します。 html: <p> こんにちはこんにちはこんにちはこんにちは 世界 </p> スタイル: p { 幅: 100ピクセル; 背景: 赤; } 上記のコードでは、テキストの先頭に 2 つのスペースがあり、内部に長い単語と改行があります。 先頭のスペースは無視されます。コンテナーが狭すぎるため、最初の単語がコンテナーから溢れ、次のスペースで折り返されます。テキスト内の改行は自動的にスペースに変換されます。 3.2 空白: 折り返しなし white-space プロパティが nowrap の場合、コンテナーの幅を超えたために改行は発生しません。 p { 空白: ラップなし; } すべてのテキストは折り返されずに 1 行に表示されます。 3.3 空白: 前 空白属性が pre の場合、<pre> タグと同じように処理されます。 p { 空白: 前; } 上記の結果は元のテキストとまったく同じであり、すべてのスペースと改行が保持されます。 3.4 空白: 事前ラップ white-space 属性が pre-wrap の場合、基本的には <pre> タグと同じように処理されます。唯一の違いは、コンテナの幅を超えた場合に改行が発生することです。 p { 空白: 事前ラップ; } テキストの先頭のスペース、テキスト内のスペース、および改行はすべて保持され、コンテナーを超える場所では行が折り返されます。 3.5 空白: 行前 white-space プロパティが pre-line の場合、改行を保持することを意味します。改行がそのまま出力されることを除いて、その他すべては white-space:normal ルールと一致しています。 p { 空白: 行前; } テキスト内の改行がスペースに変換されないことを除いて、その他はすべて通常の処理ルールと同じです。これは詩のようなテキストに役立ちます。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
1. MySQL で現在の時刻を表現するにはどうすればよいでしょうか?実際、表現方法はいろいろありま...
関連記事: Web コンテンツ ページを作成するための 9 つの実用的なヒント<br />...
mysql使用中に接続数が超過していることが判明しました~~~~ [root@linux-node...
目次1. JavaScriptについて2. JavaScript イベントループ3. マクロタスクと...
序文私は Win7 を搭載した古いラップトップを持っています。古いシステムを維持しながら、同時に U...
HTML ページ ソース コード レイアウトの概要この紹介では、Google のホームページのソー...
序文クラスメートが MLSQL Stack のストリーミング サポートを調査しています。そこで、フロ...
VMware12.0+Ubuntu16.04+MySQL5.7.22 インストールチュートリアルの詳...
1. 複数列レイアウトではなく、単一列レイアウトを使用する1 列のレイアウトにより、全体的な状況をよ...
1. はじめにデータベース内のデータ量が一定レベルに達すると、システムパフォーマンスのボトルネックを...
目次1. UDPとLinuxの基礎の紹介2. 各機能の使い方1. ソケット機能の使用2. バインド機...
1. MySQLデータベースを作成する1. データベース構文を作成する --「testdb」という名...
(I) mysql5.7のインストール: ❀詳細:無料のグリーンバージョン5.7のインストール方法は...
マスターのメソッドによると、原因は sysctl net.ipv4.ip_forward であること...
序文ファイルのコピーによってハードドライブのスペースが大量に浪費され、ファイルを更新するときに混乱が...