如何避免预格式化文本中的空行

Question

<div id="divright">
lorem ipsum
lorem ipsum
lorem ipsum
</div>

CSS

#divright{
    white-space:pre;
}

由于divright格式化，white-space:pre内容顶部有一个额外的空行。

如何避免这条空行。

我试过css display:none - 没有用。

Answer 1

如果您有权访问HTML，只需删除它：

<div id="divright">lorem ipsum

如果您知道，总会有换行符并且您知道行高，请将整个元素拉高一行：

#divright {
  margin-top: -20px; /* -1 x current line-height */
}

CSS4的white-space-collapse属性会持续一段时间，直到它准备好将我们保存在这里。

对于contenteditable个元素，您可以在每次用户尝试添加时使用Javascript收听the input event并删除前导换行符。

Answer 2

只需删除第一行之前的实际空间

<div id="divright">lorem ipsum
lorem ipsum
lorem ipsum
</div>

Answer 3

我认为你应该使用：

#divright{
    white-space:normal;
}

或

#divright{
    white-space:nowrap;
}

应删除此空行。要获得更多帮助，请查看W3C-Css Tutorial.