Question

如何在下面的示例中保留所有css样式，但如何删除顶部填充-整行的高度。

我尝试过：

 <div class="bwrap">lorem ipsum

而不是：

<div class="bwrap">
lorem ipsum

它可以工作，但是我对该解决方案不满意，它会影响代码编辑器中代码的可读性。

还有其他解决方法吗？

.bwrap{
  padding:0 14px;
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  outline:none;
  letter-spacing:0.5px;
  white-space:pre-wrap;
  white-space:-moz-pre-wrap;
  white-space:-pre-wrap;
  white-space:-o-pre-wrap;
  word-wrap: break-word;
  background:gold;
}

<div class="bwrap">
lorem ipsum
dolor sit
amend
</div>

Answer 1

您可以尝试使用<pre>标签。似乎不介意在开始时换行（但是我只在Chrome中进行过测试）：

.bwrap{
  padding:0 14px;
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  outline:none;
  letter-spacing:0.5px;
  white-space:pre-wrap;
  white-space:-moz-pre-wrap;
  white-space:-pre-wrap;
  white-space:-o-pre-wrap;
  word-wrap: break-word;
  background:gold;
  font: inherit;  
}

<pre class="bwrap">
lorem ipsum
dolor sit
amend
</pre>

Answer 2

无法更改CSS，因为white-space: pre-wrap会这样做：

成功保留空白。
行被包裹在
- 换行符
- <br>
- 在必要的地方填写该行。

因此，只有使用您已经拥有的内联解决方案才有可能-不幸的是

Answer 3

如果您确定每一行都将从新行开始，则可以使用 ::first-line 伪选择器尝试以下解决方案。

通过设置line-height:0，您可以直观地删除空行。

.bwrap {
  padding: 0 14px;
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  outline: none;
  letter-spacing: 0.5px;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  background: gold;
}

.bwrap::first-line {
  line-height: 0px;
}

<div class="bwrap">
  lorem ipsum
  dolor sit 
  amend
</div>

Answer 4

最好的解决方案可能是将其包装在外部div中并相对地定位内部div：

.bwrap{
  padding:0 14px;
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  outline:none;
  letter-spacing:0.5px;
  white-space:pre-wrap;
  white-space:-moz-pre-wrap;
  white-space:-pre-wrap;
  white-space:-o-pre-wrap;
  word-wrap: break-word;
  position: relative;
  top: -1em;
}

.outer {
    background: gold;
    height: 3.6em;
}

<div class="outer">
<div class="bwrap">
lorem ipsum
dolor sit
amend
</div>
</div>

避免在预包装div内填充顶部填充

4 个答案: