空白：プレラップで余分なスペースが発生する

Question

私はウェブサイトの一部をモバイルフレンドリーにするために取り組んでいます。元のページを再加工するのではなく、モバイル版が必要なページを複製し、それに応じてリダイレクトすることにしました。

次のマークアップは、デスクトップ版のページでは問題ありません。

<div class="description"> 
    <asp:Literal ID="lblDescription" runat="server"></asp:Literal> 
</div> 

.description { white-space: pre-wrap; } 

モバイル版では、コンテンツの先頭と末尾に一連の空白が追加されています。そのようにレンダリングされることになります。

       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ornare posuere efficitur. Suspendisse molestie, leo in vestibulum condimentum, ligula risus rutrum mi, a condimentum augue quam nec velit. Nullam quis elementum ipsum, vitae facilisis tellus. Integer sed turpis eget purus pellentesque suscipit eu non magna.            

ファイアバグでのコンテンツの表示は次のようになります。コンテンツの先頭と最後に1つの空白があることに注意してください。

<div class="description"> Lorem ipsum dolor sit amet </div> 

そして、私は放火犯でコンテンツを編集するとき、それはこの

"        Lorem ipsum dolor sit amet       " 

となり、これらの空白は、ページのデスクトップバージョンにのみモバイル版ではありません。 htmlのマークアップとcssは、ページの両方のバージョンでまったく同じです。私はページ上の他のマークアップをすべて削除しましたが、それはまだ発生します。ホワイトスペースをpre- *以外の値に変更した場合はうまく見えます。これらの2つのページの唯一の違いは、ブートストラップの追加とそれを削除しても違いはありません。

誰にもアイデアはありますか？私は白いスペースが必要です：キャリッジリターンを保持するためにプレラップ。

Answer 1

タグのコンテンツ内の任意の空白文字（改行/タブ/スペース）描画するときに考慮されるHTMLで

<div class="description"><asp:Literal ID="lblDescription" runat="server"></asp:Literal></div> 

を試してみてください。

詳細については、this questionを参照してください。