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. 短絡判定2. オプション連鎖演算子 (?) 3. ヌル合体演算子 (??) 4. 終了関数...
この記事の例では、ドラッグアンドドロップを使用して構造ツリーを作成するVueの具体的なコードを共有し...
目次1. 需要2. データベース設計3.Javaバックグラウンド構成の実装4. WeChatアプレッ...
目次元に戻すログUNDOログの生成と破棄UNDOログの保存元に戻すログ機能トランザクションの原子性の...
<br />長年の専門的なアートデザイン教育を通じて「美とは何か」を学びましたが、「美を...
序文リバース プロキシは、Web 経由で行われたリクエスト (http と https の両方) を...
目次1. 遅いところはどこですか? 2. 不要なデータをクエリしましたか? 1. 不要なレコードをク...
MySQL は、マルチテーブルクエリを実行するときにエラーを報告します。 [SQL] SELECT ...
序文JS の this ポインターは、初心者にとって常に頭痛の種でした。今日は、これが地面に落ちたと...
テーブル ヘッダーが固定されている場合は、それを 2 つのテーブルに分割する必要があります。1 つの...
この記事では、WindowsでのMySQL 5.7.18のインストールと設定のチュートリアルを参考ま...
バックグラウンド コントローラー @RequestMapping("/getPDFStre...
目次1. uuid関数を使用して、一意かつ不規則な主キーIDを生成します。 2. idの自動成長1....
最近、Bootstrap を使って Web サイトを開発しています。表を処理していたところ、PC で...