空白：前行在顶部添加不寻常的空间

Question

我有一个下面的 css 声明，它添加了下面屏幕截图中给出的行距。

.colGroup{
    white-space: pre-line;
}

我尝试添加以下属性，但没有成功。

display: inline-block;
vertical-align: top;
height: 4.75em;
line-height: 1.75em;

编辑<td>（在我面临这个问题的地方添加了重复标签的一部分）。

<td width="15%">
    <span class="colGroup">
       <div>
            <p id="c2308view">
                t = 24 
                t1 = 27 
                t2 = 27 
                t3 = 36
                </p> 
            </div>
        </span>
        <span class="dateColumn">
            <div>
                <p id="c2312view"><span>31-Dec-2010</span></p>
            </div>
        </span>
</td>

有人可以帮忙吗？

Answer 1

white-space我最近不得不处理css 中处理各种值的方式。MDN 上的空白文档非常有帮助。请参阅此内容以及整个页面：https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#Values

当你使用下面的CSS时，这意味着什么？

white-space: pre-line;

这将保留代码中的换行符，同时折叠空格。换行符可以是显式<br/>元素或换行符。

再看看你的代码。请注意，虽然您看不到字符，但在获取元素内的值之前您会返回三次<p>。newlineDOM 正在读取一个隐藏字符。

<span class="colGroup"> /* newline character 1 */
   <div> /* newline character 2 */
        <p id="c2308view"> /* newline character 3 */
            t = 24 /* newline character 4, which I assume you want to preserve */

如果您在代码中删除这些返回，虽然语法不是那么可读，但它将遵循white-space您想要的值。

请参阅下面的片段：

white-space: pre-line;

<span class="colGroup"> /* newline character 1 */
   <div> /* newline character 2 */
        <p id="c2308view"> /* newline character 3 */
            t = 24 /* newline character 4, which I assume you want to preserve */

Answer 2

尝试添加一个<span>内部<p>，这对我有用。

例如，使用 Tailwind.css 和 Vue.js：

<p class="whitespace-pre-line">
   <span>{{ user.info }}</span>
</p>

Answer 3

我昨天就遇到了这个。我做了这样的事情：

.colGroup{
white-space: pre-line;
margin-top: 0px;
}