0

The default font is depends on browser, so in Windows/Chrome environment I noticed that it to truncate text by overflow, white-space, text-overflow, the part of text below underline becomes invisible.

For font-size: 14px and line-height: 14px all letters are almost visible, just a part of g letter has been cropped. For font-size: 12px and line-height: 12px, the visibility is worse: the lower part of j and g has been cropped:

.test1{
  width: 200px;
  font-size: 14px;
  line-height: 14px;
  background: lightsalmon;
  
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.spacer{
  height: 30px;
}

.test2{
  width: 200px;
  font-size: 12px;
  line-height: 12px;
  background: lightsalmon;
  
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
<div class="test1">jane glad TestThatVerHardToBreakAlasdfjsdfjkjsdfjkosdfjoisdfjiosdfijdsfijowioqjrfiwqjfiw</div>

<div class="spacer"></div>

<div class="test2">jane glad TestThatVerHardToBreakAlasdfjsdfjkjsdfjkosdfjoisdfjiosdfijdsfijowioqjrfiwqjfiw</div>

Of course if we change the line height, text becomes fully visible. But:

  1. I don't want to change the line-height: 1; for single-line elements.
  2. Even I need change line-height, I need to do some experiments to select the line-height value such as text will be fully visible. So, the line-height value will be hard-coded.

Is here some solution which does not depend on font size and line height?

Takeshi Tokugawa YD
  • 670
  • 5
  • 40
  • 124
  • Try increasing the `line-height`. For me, I always use a higher value for `line-height` than the `font-size` – Akhilesh B Chandran Mar 09 '20 at 06:47
  • see https://stackoverflow.com/a/41336508/8798220 – Nisharg Shah Mar 09 '20 at 06:55
  • *I don't want to change the line-height: 1; for single-line elements.* --> you **have** to change line-height. Using 1 as value is very bad: https://stackoverflow.com/a/55978512/8620333 – Temani Afif Mar 09 '20 at 10:24
  • @TemaniAfif, oh, I see. It was a lot of discussions, but how can I select the optimal line height? – Takeshi Tokugawa YD Mar 10 '20 at 01:00
  • 1
    There is no optimal line-height. You simply need to make it big enough to contain the text (by default browser set it around 1.2 so you should not make it less than this value or you will have overflow and text cut) – Temani Afif Mar 10 '20 at 07:03
  • @TemaniAfif, long time no see! Do you have some kind of list of overhanging characters (like "j", "g", "Ç", "Ĥ") to test the correct truncating? – Takeshi Tokugawa YD Jul 27 '21 at 01:16

0 Answers0