white-space：予期したとおりに動作しない

Question

キャリッジリターン（入力）を含むサーバーからテキストが戻ってきました。私はこのテキストを複数の行に表示するために何人かの人に尋ねました。彼らは私にwhite-space: preを使うよう勧めました。

white-space: preなしで複数の行にテキストを表示する方法はありますか？または、preを段落のように動作させるには余分なパディングを持たずに複数の行を使用する方法がありますか？

.gallery-Gcontainer { 
 
    margin: 0 !important; 
 
    padding: 0; 
 
} 
 
#genericpartTitle, 
 
.content { 
 
    padding-left: 20px; 
 
} 
 
.content .sidebar, 
 
.content section { 
 
    display: inline-block; 
 
    width: 30%; 
 
    border: none; 
 
    vertical-align: top; 
 
} 
 
.content .sidebar img { 
 
    width: 200px; 
 
}

<div class="gallery-Gcontainer"> 
 
    <div class="header-area"> 
 
    <h3 id="genericpartTitle">my page</h3> 
 
    <hr> 
 
    </div> 
 
    <div class="content"> 
 
    <div class="sidebar"> 
 
     <img class="img-sidebar" src="https://static.pexels.com/photos/30738/pexels-photo-30738.jpg" /> 
 
    </div> 
 
    <section> 
 
     <h5 class="item-title">Welcome to my first page</h5> 
 
     <p style="white-space: pre" class="description"> 
 
     Hello, anything will go here, text will come from the server like this, and I need to display it on multiple lines. 
 
     </p> 
 
    </section> 
 
    </div> 
 
</div>

更新： 置く：ホワイトスペース：答えで提案されているように、プリラインを、パディング左の問題を解決しますが、まだここで

は、私が持っているものですパディングトップに大きなスペースがあります。

Answer 1

white-space: preの代わりにwhite-space: pre-lineを使用してください。 MDNから

：

The white-space property

white-spaceプロパティは、要素の処理方法空白 内部記述するために使用されます。

通常空白のシーケンスが折りたたまれています。ソースの改行文字は他の空白として扱われます。ラインボックスを塗りつぶすには、 のように改行します。

normal用として折りたたみ空白NOWRAP

が、テキスト内の改行（テキストの折り返し）を抑制します。

事前空白のシーケンスが保持されます。行は、ソース内の改行文字と、<br>要素でのみ破棄されます。

プレラップ空白のシーケンスが保存されます。行は、改行文字（<br>）で折り返され、必要に応じて行ボックスを埋める。

pre-line空白のシーケンスが折りたたまれています。行は、改行文字（<br>）で折り返され、必要に応じて行ボックスを埋める。

また、padding-topの問題は、実際にはパディングではありません。あなたのコードを見ると、行頭に少なくとも1つの改行があるようです。

Answer 2

あなたのCSSスタイリングとして「display：block」を使用してください。これは新しい行に壊れるはずです。

<p style="display: block" class="description">