代码之家 › 专栏 › 技术社区 › David R

空白:前一行在顶部添加了不寻常的空白

css3 css html

0

David R · 技术社区 · 6 年前

下面是一段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>

有人能帮忙吗?

2 回复 | 直到 6 年前

1

9

wlh 6 年前

我最近不得不处理各种各样的问题 white-space 值在css中处理。关于MDN for 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 */

如果在代码中删除这些返回,而语法不是那么可读,那么它将遵循 空白 你想要的价值。

请参见下面的片段:

.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

-1

Peter 3 年前

尝试添加一个 <span> 里面 <p> ,这对我来说很有帮助。

比如顺风。css和Vue。js:

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

3

-3

Robby 6 年前

我昨天才碰到这个。我是这样做的:

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