html - 空白 : pre-line adds unusal space at top

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 上的 white-space 文档非常有帮助。看到这个，整个页面:https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#Values

使用下面的css是什么意思？

white-space: pre-line;

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

再次查看您的代码。请注意，虽然您看不到字符，但您在获得 <p> 中的值之前返回了三次。元素。有一个隐藏的newline DOM 正在读取的字符。

<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你想要的值(value)。

请参阅下面的代码段:

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

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