CODEWITHSUNDEEP
htmlcss
Ipad
Ipad

Reputation: 392

text-overflow: ellipsis cuts the double dots on German Ö Ä Ü

i cut a text which is longer than my container (div) in my HTML with an text-overflow: ellipsis according to that i also set overflow: hidden to see dots if the text is longer as the width of the container.

This functionality is working perfectly but, the german 'Ö, Ä, Ü' (referenced, because it has been noticed on this characters) missing the dots on top if the line-height is lower than the height of the dots.

Assume that i cant increase the line-height. When i do this, its working. But is there a chance to have the same behavior without ellipsis only for the x - axes?

    .box {
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .font {
      font-family: UniversNextMedium;
      color: #3c3c3c;
      text-shadow: 0px 1px 0px #FFFFFF;
      font-size: 21px;
      line-height: 15px;
    }
    
    <div class="box font">
        hellowÖrldtheonlyworldwehave
    </div>

Here is a fiddle:

http://jsfiddle.net/an256zu1/

Upvotes: 3

Views: 866

Answers (4)

Fabian Mebus
Fabian Mebus

Reputation: 2415

The problem here is the combination of the line-height: 15px; and overflow: hidden;. I would recommend to set a proper line height, 1.4 for example:

From the article: line-height:

The recommended method for defining line height is using a number value, referred to as a "unitless" line height.

.box {
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.font {
  font-family: UniversNextMedium;
  color: #3c3c3c;
  text-shadow: 0px 1px 0px #FFFFFF;
  font-size: 21px;
  line-height: 1.4;
}
<div class="box font">
    hellowÖrldtheonlyworldwehave
</div>

Upvotes: 0

pisamce
pisamce

Reputation: 533

You could use combination of margin and padding to fix the issue and preserve text position in layout. For example:

    .box {
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .font {
      font-family: UniversNextMedium;
      color: #3c3c3c;
      text-shadow: 0px 1px 0px #FFFFFF;
      font-size: 21px;
      line-height: 15px;
      margin-top:-5px;
      padding-top:5px;
    }
    
    <div class="box font">
        hellowÖrldtheonlyworldwehave
    </div>

Upvotes: 0

K K
K K

Reputation: 18109

Use line-height:21px similar to font-size.

Demo: http://jsfiddle.net/lotusgodkk/an256zu1/1/

If you remove overflow, then ellipsis will not work. If use something else i.e. margin or padding then the layout may break.

Or you may also decrease the font-size. That will also solve your problem without breaking the layout

Upvotes: 3

Keval Bhatt
Keval Bhatt

Reputation: 6322

Use padding-top:3px; it works.

.box {
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top:3px;
    border:1px solid
}

.font {
  font-family: UniversNextMedium;
  color: #3c3c3c;
  text-shadow: 0px 1px 0px #FFFFFF;
  font-size: 21px;
  line-height: 15px;
}
<div class="box font">
    hellowÖrldtheonlyworldwehave
</div>

Upvotes: 0

Related Questions