HTML コード内のスペースと空白行についての簡単な説明

HTML コード内の連続するスペースまたは空白行 (改行) はすべて 1 つのスペースとして表示されます。

例1: (テキストコンテンツ内の連続スペース)

コード

例2: (コード間の連続スペース)

コード

上記の 2 つの例は、HTML コード内の連続するスペースは表示時に 1 つのスペースとして表示され、残りの冗長なスペースは削除されるか無視されることを証明しています。

段落テキストは実際には HTML コードの一部ですが、p タグの内側にあります。一方、例 2 のスペースは 2 つの span タグの間にあります。

スペースについて理解できたので、次は空白行について見てみましょう。

例3: (テキストコンテンツ内の空白行)

コード

証明: HTML コード内の連続するスペースまたは空白行 (改行) はすべて 1 つのスペースとして表示されます。

この場合、コード内の連続するスペースまたは空白行も連続するスペースまたは空白行として表示されるように、2 つの文字間のスペースを広げたい場合はどうすればよいでしょうか。実はとても簡単です。

方法 1:スペースと空白行の両方に適用できる事前フォーマット タグ <pre> を使用できます。

方法 2:スペース エンティティ文字 &nbsp; を使用してスペースを置き換え、改行タグ <br/> を使用して空白行を置き換えます。この方法では必要な表示効果を実現できますが、&nbsp; と <br/> は HTML では意味を持たないため、検索エンジンにとって最適な方法とは言えません。したがって、できるだけ使用しないことをお勧めします。また、&nbsp; は小文字にする必要があり、最後のセミコロンは省略できないことにも注意してください。

方法3: (スペースを合わせる) 全角スペースを使用する

全角スペースは漢字として解釈されるため、HTML 区切り文字として解釈されず、実際のスペース数に応じて表示されます。

質問: 全角入力方式を使用するにはどうすればいいですか?

Sogou 入力方式を例にとると、通常は半角入力を使用します。ステータス バーに月のアイコンがある場合は、半角入力が使用されていることを意味します。太陽のアイコンの場合は、全角入力が使用されていることを意味します。アイコンをクリックするか、ショートカットキー Shift + Space (スペース文字) を使用すると、全角と半角を切り替えることができます。

半角入力（月） 全角入力（太陽）

方法 4: CSS スタイルの word-spacing プロパティを使用して、CSS の word-spacing プロパティを制御します。CSS の word-spacing プロパティを使用すると、文字 (単語) 間の標準間隔を変更できます。英語では 2 つの単語がスペースで区切られていることがわかっているので、視覚的に次のように考えることができます。単語間隔は、単語間のスペースの幅を変更します (長くしたり短くしたりします)。

方法 5: CSS スタイルの空白プロパティを使用します。このプロパティは、要素内の空白の処理方法を宣言します。

white-space:normal; は通常の設定です。設定しない場合と同様に、連続するスペースや空白行には 1 つのスペースのみが表示されます。

white-space:nowrap; 折り返さないというのはどういう意味ですか?通常、テキストがテキスト領域を超えると、テキストは自動的に折り返されます。この設定は、自動的に折り返されず、改行タグに遭遇した場合にのみ折り返されることを意味します。<br />

white-space:pre; 方法1と同様に、テキストがそのまま出力され表示されます。テキストがテキスト領域を超えると、改行は行われず、スクロール バーが生成されます。

white-space:pre-wrap; はスペースと空行を保持しますが、テキストがテキスト領域を超えると自動的に折り返されます。

white-space:pre-line; 連続するスペースは 1 つのスペースとして表示されますが、連続する空白行は保持されます。

以上がHTMLコードのスペースと空白行についての編集者の簡単な説明の内容です。皆様の123WORDPRESS.COMへのご支援をお待ちしております。

オリジナル URL: http://www.cnblogs.com/web-HCJ/p/4543093.html