要素間のマークアップでテキスト行が途切れる

Question

HTMLマークアップの実際の改行の結果としてバグがあります。私は私が見ているものをサポートするドキュメントを探しています。これは<br>またはCSSではなく、実際のマークアップ内の改行と関係します。基本的には、この：

<h4 class="condensed-title-wrap"> 
    <span class="condensed-title">Here is the title text</span>&nbsp;<i class="icon-icon-navigation-mobile-arrow-right"></i> 
</h4> 

が異なり、これよりもレンダリング：

<h4 class="condensed-title-wrap"> 
    <span class="condensed-title">Here is the title text</span> 
    &nbsp; 
    <i class="icon-icon-navigation-mobile-arrow-right"></i> 
</h4> 

私は何のために求めていることは、言語とこれが真実であることかもしれないいくつかのドキュメントです。

Answer 1

行の終わりに表示される目に見えないキャリッジリターンと改行は、空白としてカウントされます（改行なしの空白とは異なります（ など）。 HTMLでは、一連の空白が1つの空白文字に集約されている必要があります。 2番目の例では、前の改行と先頭のスペースを含む の直前のセクションでテキストが改行されます。

これは仕様でいくつかの場所に記載されている、one of whichがここに引用されている：

ユーザーエージェント文字列内の空白を削除して崩壊する場合、それは 1の任意のシーケンスを交換する必要があります以上の連続その文字列内に空白文字 を1つのU + 0020 SPACE文字で置き換え、その文字列の先頭と末尾の空白を取り除いてから を削除します。

代わり要素間（多くの場合、4画素）間隔で終わる、左右を配置するinline-blockフォーマットされた要素の組を取得しようとすると、この問題は、しばしば見られます。

このコードは、このようなギャップを生成する：

<div> 
    <span>left block</span> 
    <span>right block</span> 
</div> 

このコードがない間：

<div> 
    <span>left block</span><span> 
    right block</span> 
</div> 

ギャップ理由一spanの端部との開始との間の空白であります次。この解決策は、span要素の間の空白を、圧縮されずに無視される文字列の先頭に移動します。