text-overflow: ellipsis is displaying different ch

Question

I've got a bit of a CSS problem here.

See this image

In this image I added CSS styles for the text "INTENSE TRAINING"

.sample-style{ 
  width: 100%;
  overflow: hidden !important;
  text-overflow: ellipsis;
  white-space: nowrap; }

The problem is when I add

text-overflow: ellipsis;

It displays that big O with 2 dots on top instead of "...". Can anyone tell me what is going on here? I tried this code with my other project and it works.

This is my markup:

<div class="panel radius panel-click">
  <a href="#" data-dropdown="drop1" class="tiny right dropdown" data-options="align:left;"><i class="fi-wrench"></i></a>
  <div class="large-12">
    <h1 class="panel-title text-upper"><small>INTENSE TRAINING</small></h1>
  </div>    
  <div class="large-12">
    <h2><small>train with the champ</small></h2>
  </div>
  <div class="large-12">
    <img src="image.jpg" alt="this is an image">
  </div>
</div>

Answer 1

See https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow which tells you:

This keyword value indicates to display an ellipsis ('…', U+2026 HORIZONTAL ELLIPSIS) to >represent clipped text.

Which means that both your declared charset and font should support the U+2026 for a proper display.

Notice that authors are encouraged to use UTF-8.

So please verify that your problem the problem still exists when you change your charset to utf-8 and use a font that support U+2026.

The text-overflow property also accepts a string instead of the ellipsis but this (experimental) syntax can only be use for Firefox.