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

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

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

Answer 2

我最近刚刚不得不处理在CSS中处理各种white-space值的方式。关于MDN的空白文档非常有用。看到此内容以及整个页面：https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#Values

使用以下CSS是什么意思？

white-space: pre-line;

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

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

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

请参见以下代码段：

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

空白：前行在顶部添加了多余的空间

2 个答案: