CODEWITHSUNDEEP
htmlcss
Leo Messi
Leo Messi

Reputation: 6176

Keep the height of a text even if it is a white space

There is a value like this:

<span className="my-value">{value}</span>

css:

  .my-value {
    font-weight: 600;
    font-size: 12px;
    line-height: 22px;
    color: #0D1E2C;
  }

Value contains a text value which can be a string "example". But it can also be this " ", a white space, case in which the element is not shown, on the page it looks like it does not exist.

I want to keep it there so the page is well structured.

I thought that line-height will keep it but it doesn't. Any ideas?

Upvotes: 4

Views: 2281

Answers (5)

xyres
xyres

Reputation: 21754

CSS has a property called white-space which can be used to control this behaviour.

.my-value {
    white-space: pre-wrap;
}

Live demo:

.my-value {
    display: inline-block;
    width: 150px;
    border: 2px solid red;
    white-space: pre-wrap;
}
This box has only white space: <span class="my-value"> </span>

Upvotes: 1

Kelvin Omereshone
Kelvin Omereshone

Reputation: 816

You could use a combination of :empty and :after to add a unicode character \200b which is a non-breaking space with zero-width to preserve the height of the span even if it's empty. So in your CSS, you will have:

.my-value {
    font-weight: 600;
    font-size: 12px;
    color: #0d1e2c;
}
.my-value:empty:after {
   content: '\200b';
}

The above code is clean in the sense that it will only add the character when the span element with the class on my-value is empty.

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272937

You can add an empty whitespace on a pseudo element to keep the space even if the text is empty.

.my-value {
  font-weight: 600;
  font-size: 12px;
  line-height: 22px;
  color: #0D1E2C;
}
.my-value::after {
  content:" ";
  font-size:0;
  white-space:pre;
}
<span class="my-value"> </span>

<p>aaa</p>

Upvotes: 2

Code Spirit
Code Spirit

Reputation: 5061

Your empty space will be ignored by the browser because it automatically formats spaces and newlines. You can replace your space by a &nbsp;

Upvotes: 2

Francesco Fastelli
Francesco Fastelli

Reputation: 36

I think that you can try with using min-height or height attribute with the value that you want and display attribute with value inline-block or block. It should be work

Upvotes: 0

Related Questions