私のプロジェクトに取り組んでいるときに\n、ブラウザーでこれらの 2 行の間に html ソースがスペースとして表示されることがわかりました。例えば、
a
b
ブラウザでは として表示されa bます。改行を削除せずにこの「スペース」を回避するにはどうすればよいですか? 私が望む結果はab、互いに隣り合っています—別々の行ではなく、それらの間にスペースがありません。
私は php を使用してその場で非常に大きなフォームを生成します。読みやすくするためにPHP_EOL、 と同じものを使用し\nますが、ブラウザーでは余分な空白が表示されます。私はそれらを取り除きたいです。
更新された回答:
以下のコメントで、探している結果は「ab」が隣り合っており、その間にスペースや改行がまったくないと言っていました。
"a" と "b" が本当にtextの場合、オプションはないと思います。それらを隣り合わせにする場合は、改行を削除する必要があります。（あなたがそれをしたくないと言ったのは承知しています。私はただ言っているだけです。あなたには選択の余地がないと思います。）
「a」と「b」が要素の場合 (大きなフォームを出力していると言っていました)、負の CSS マージンでゲームをプレイできますが、見苦しくなります。または、その改行をタグに移動する古いトリック、たとえば:
<input name="a" type="text"
><input name="b" type="text"
>
タグ内の改行は表示されません (テキストではなくタグ内にあるため)。
全体的なマークアップによっては、要素間の空白に関する以下のリンクも役立つ場合があります。基本的に、ブラウザが要素間の空白を無視する場合があるため、それを行うように少し調整できる場合があります。
あなたは読みやすさのためにそれを使用していると言いました。別のオプションは、非常に冗長ですが、改行をコメントに入れることだと思います。
form field here<!--
-->next form field here<!--
-->next form field here
...しかし、繰り返しになりますが、非常に冗長です (そして、おそらく読みやすさにはあまり影響しません)。
あなたの最善の策は、あなたが望んでいないと言ったものです：改行を削除してください。:-)
元の答え:
（「ab」を隣り合わせにすることが不明確だった頃から、ほぼ全員が改行を表示したいと考えていました。）
ソース コードで '\n' が使用されている場合、ブラウザーにスペースが表示されるのはなぜですか?
HTML 標準では、空白文字のすべてのシーケンス (要素間の空白文字を除く) は単一のスペースとして扱われると規定されているためです。したがって、HTML の場合、改行、スペース、タブ、キャリッジ リターン、およびフォームフィードはすべてまったく同じです。これらはスペースとして表示されます。
改行を削除せずにこの「スペース」を回避するにはどうすればよいですか?
いくつかの方法があります:
br要素を使用できます：
a<br>b
ブロック表示を使用する別のコンテナーに と を配置できます (既定では と の両方が実行aされ、CSS を使用して他のコンテナーに適用できます)。bpdivdisplay: block
<p>a</p>
<p>b</p>
また
<div>a</div>
<div>b</div>
等
その改行を改行として本当に扱いたい場合はpre、事前にフォーマットされたテキストを特別に処理する要素を使用できます
<pre>a
b</pre>
white-space...そして、CSS のスタイル(値pre、pre-wrap、および)を使用して、同じ種類の処理を他の要素に適用できますpre-line。
\n は、改行を「表示」するために必要な唯一の文字ではない場合があります。
プラットフォームによっては、 \n を使用すると、コードのみ、またはコードとビジュアル出力の両方で改行が表示される場合があります。一部のプラットフォームでは、\r に視覚的なキャリッジ リターンが必要です。場合によっては、必要な出力を取得するために \r\n が必要になることもあります。
SO の詳細情報 > \r と \n の違いは何ですか?
</br>\n ではなくhtml でスペースを使用します。\n は改行のコードで使用されます。
レンダリングされた出力に空白を入れたくない場合は、入力に空白を入れないでください。簡単なことです。あるいは、中間ステップとして読みやすい xml を生成し、それを xslt で不要な空白を含まない html に vprocess します。
注意: ユーザーは、この回答に適切な<sarcasm>タグを挿入することをお勧めします;)
このようなインラインマークアップでそれらを囲みます
<span>a</span
><span>b</span>