white-space: pre-line adds unusal space at top

Question

I've a below piece of css declaration which adds line spacing given in the below screenshot.

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

I've tried adding the below attributes but with no luck.

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

EDIT (added part of the repeating <td> tag where I'm facing this issue).

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

Can someone help?

Answer 1

I just recently had to deal with the way various white-space values are handled within css. The documentation on MDN for white-space is very helpful. See this, and the entire page: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#Values

What does it mean when you use the following css?

white-space: pre-line;

This will preserve line-breaks in your code, while collapsing white space. Line-breaks can be explict <br/> elements or newline characters.

Look again at your code. Notice, while you can't see character, you return three times before getting to the values within the <p> element. There is a hidden newline character being read by the 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 */

If you remove these returns within your code, while the syntax is not all that readable, it will honor the white-space value you are desiring.

See the snippet below:

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

Answer 2

try to add a <span> inside of the <p>, this did the trick for me.

For example with Tailwind.css and Vue.js:

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