CODEWITHSUNDEEP
css
nonopolarity
nonopolarity

Reputation: 151006

With CSS, is there a way to set the height of a line so that it is certain the text will show (and not get hidden at the top and bottom)?

Let's say we don't set the height of a div, and show a few words that won't wrap to the next line, then for sure the text will show without the W cut off at the top, or the g cut off at the bottom.

But what if we need to set it to show just one line of text?

Example of text being cut off: https://jsfiddle.net/82us6y53/2/

#msg {
  font-size: 32px;
  font-family: "Times New Roman", "Lucida Grande", serif;
  width: 400px;
  height: 1em;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
}

You can set height to 1em, or 1.2em, or 1.6em, but how can you guarantee the text won't get cut off? If you think 1.6em will work, what if in the font-family list, a font doesn't exist on the PC, Mac, or Ubuntu, and the second or third font is used? Or what if the designer thinks 1.6em is too tall, and want it to be less, and what is the minimal height you can set it -- is there a way to find out?

Update: I actually saw the height being set in the existing code in the project... I think the intention was to adjust the spacing between that line and the element below it... so I removed the line height: 32px or height: 1em from the code, and adjusted the padding and margin instead. But I wonder, what if we need to actually set a height for this element, then is there is way to know for sure the text will all show.

Upvotes: 0

Views: 65

Answers (2)

Priya
Priya

Reputation: 1355

This might work for you.. Set height to auto only.

#msg {
font-size: 32px;
font-family: "Times New Roman", "Lucida Grande", serif;
width: 400px;
height: auto;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap
}

Upvotes: 2

Tina
Tina

Reputation: 1234

Remove the height property, or set it to auto if it is defined due to a previous selector, and then set the line-height to something comfortable:

#msg {
  font-size: 32px;
  font-family: "Times New Roman", "Lucida Grande", serif;
  width: 400px;
  line-height: 1.5;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
}

See forked version of your JSFiddle here.

You could also use line-height: normal; but a number value allows for more flexibility in vertical spacing should your designer request more space. The important part is that height should not be set—the important value is line-height.

Upvotes: 1

Related Questions