白色空间：预先不按预期工作 [英] white-space: pre not working as expected

问题描述

我从包含回车（回车）的服务器返回文本。我问了一些人怎么做才能在多行显示这个文本，并且他们建议我使用空格：pre 。

是否有任何其他方式可以在不存在 white-space：pre 的多行上显示文本？或者让 pre >像一个段落一样行，但有多行而没有额外的填充？

以下是我的：

  .gallery-Gcontainer {margin：0！important; padding：0;}＃genericpartTitle，.content {padding-left：20px;}。content .sidebar，.content section {display：inline-block;宽度：30％; border：none; vertical-align：top;}。content .sidebar img {width：200px;}  

 < div class =gallery-Gcontainer> < div class =header-area> < h3 id =genericpartTitle>我的网页< / h3> < HR> < / DIV> < div class =content> < div class =sidebar> < img class =img-sidebarsrc =https://static.pexels.com/photos/30738/pexels-photo-30738.jpg/> < / DIV> <节> < h5 class =item-title>欢迎来到我的第一页< / h5> < p style =white-space：preclass =description>你好，任何东西都会放在这里，文字就像这样来自服务器，我需要在多行上显示它。 < / p为H. < /节> < / div>< / div>  

更新：
按照答案中的建议放置：white-space：pre-line，解决了填充左边的问题，但仍然有很大的填充空间。 c> white-space：pre-line 。

从MDN开始： b
$ b

空格
属性

white-space 属性用于描述如何处理
元素内的空白。

正常 空白的序列已折叠。源中的换行符将作为其他空白符处理。
$ b nowrap 折叠空格为 normal ，但是会抑制文本中的换行符（文字换行）。 / strong>保留空白的序列。行仅在源代码中的换行符处和< br> 元素中被破坏。

pre-wrap 保留空白的序列。线条以换行符打断，位于< br> 中，并且必要时填充行框。 strong> pre-line 空白的序列已折叠。线条以换行符打断，位于< br> ，并根据需要填充线框。

另外，你提到的 padding-top 问题并不是真正的填充。在查看你的代码时，行首至少有一个换行符。

I have text coming back from the server containing carriage return (enter). I asked some people what to do to display this text on multiple lines, and they advised me to use the white-space: pre.

Is there any other way to display the text on multiple lines without white-space: pre? Or any way to make pre act like a paragraph but with multiple lines without having the extra padding?

Here's what I have:

.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>

Update: Putting: white-space: pre-line as suggested in the answers, solved the padding left issue, but still there's a big space in padding-top.

解决方案

Instead of white-space: pre use white-space: pre-line.

From MDN:

The white-space property

The white-space property is used to describe how whitespace inside the element is handled.

normal Sequences of whitespace are collapsed. Newline characters in the source are handled as other whitespace. Breaks lines as necessary to fill line boxes.

nowrap Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.

pre Sequences of whitespace are preserved. Lines are only broken at newline characters in the source and at <br> elements.

pre-wrap Sequences of whitespace are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

pre-line Sequences of whitespace are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

Also, the padding-top issue you mention isn't really padding. In looking at your code there appears to be at least one line break at the start of the line.

这篇关于白色空间：预先不按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！