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

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

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

コード

<p>这段文本中，输入连续的空格          大概输入了十个。</p>

表示効果: 「square」と「big」の間にスペースがあり、単なるスペースとして表示されます。

这段文本中，输入连续的空格 大概输入了十个。

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

コード

<span>span是一个行内标签</span>               <span>和前面的span元素之间隔了很多个空格</span>

表示効果: 2つのspan要素の間の連続スペース、つまり「sign」と「and」の間のスペースが表示されます。スペースは1つだけです。 。

span是一个行内标签 和前面的span元素之间隔了很多个空格

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

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

スペースを理解したら、空白行を見てください。同じことです

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

コード

<p>这段文本中，输入连续的空行  
  
  
  
  
  
大概输入了五行。</p>

表示効果: ご覧のとおり、テキスト内に 5 つの空白行がありますcode の場合、スペースのみが表示されます。

这段文本中，输入连续的空行 大概输入了五行。

例 4: (要素/ラベル間の空白行)、例 2 のスペースを空白行に置き換えるだけです。表示効果は例 2 と同じです。複数の空白行はスペースのみが表示されます。

<span>span是一个行内标签</span>  
  
  
  
  
  
<span>和前面的span元素之间隔了很多空行</span>

span是一个行内标签 和前面的span元素之间隔了很多空行

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

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

方法 1: スペースや空白行に適した、事前にフォーマットされたタグ

 を使用できます。 <pre class="brush:html;toolbar:false"><pre class="brush:php;toolbar:false">  
这是  
预格式文本。  
它保留了      空格  
和换行。  

表示効果

这是  
预格式文本。  
它保留了      空格  
和换行。

方法 2: スペースエンティティ文字   を使用してスペースを置換し、改行タグ
を使用して空白行を置換できます。この方法では目的の表示効果を得ることができますが、  と
には HTML のセマンティクスがないため、検索エンジンにとってはあまり使いやすいものではありません。したがって、できるだけ使用しないことをお勧めします。また、  は小文字にする必要があり、末尾のセミコロンは省略できないことにも注意してください。

方法3：（スペースに適しています）全角スペースを使用します

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

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

Sogou 入力方法を例に挙げると、ステータスバーに月のマークがある場合は、半角入力が使用されていることを意味します。全角入力が使用されていることを確認します。アイコンをクリックするか、ショートカットキーShift+Spaceを押すことで、全角と半角を切り替えることができます。亮 半角入力（月） 全角入力（太陽） 方法 4: CSS スタイルの単語間隔属性コントロールを使用すると、CSS の Word-SPACING プロパティで単語 (単語) 間の標準間隔を変更できます。英語では 2 つの単語がスペースで区切られていることがわかっているため、単語間隔によって単語間のスペースの幅が変化する (長くしたり短くしたり) と視覚的に考えることができます。

方法 5: CSS スタイルで空白属性を使用する この属性は、要素内で空白文字を処理する方法を宣言します。

値

説明

通常デフォルト。空白はブラウザによって無視されます。 pre空白はブラウザによって保持されます。 HTML の

 タグのように動作します。 <td></td>

nowrap テキストは折り返されず、
タグが見つかるまで同じ行に続きます。 pre-wrap空白シーケンスを保持しますが、通常通りにラップします。 pre-line空白シーケンスを結合しますが、改行は保持します。

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

white-space:nowrap;改行がないとはどういう意味ですか?通常の状況では、テキストがテキスト フィールドを超えると、テキストは自動的に折り返されませんが、改行タグ
に遭遇するとテキストが折り返されます。 pre;方法1と同様に、テキストをそのまま出力して表示します。テキストがテキスト領域を超える場合、折り返されず、スクロール バーが生成されます。

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

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

上記は、編集者があなたに提供したHTMLコードのスペースと空白行に関する簡単な説明の全内容です。PHP中国語ウェブサイトをサポートしていただければ幸いです~

スペースと空白行に関するその他の関連記事については、こちらをご覧ください。 HTML コード内の空白行については、PHP 中国語 Web サイトを参照してください。