css3 - text-overflow: ellipsis is displaying different character -
css3 - text-overflow: ellipsis is displaying different character -
i've got bit of css problem here.
see image
in image added css styles text "intense training"
.sample-style{ width: 100%; overflow: hidden !important; text-overflow: ellipsis; white-space: nowrap; }
the problem when add together
text-overflow: ellipsis;
it displays big o 2 dots on top instead of "...". can tell me going on here? tried code other project , works.
this 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 champ</small></h2> </div> <div class="large-12"> <img src="image.jpg" alt="this image"> </div> </div>
see https://developer.mozilla.org/en-us/docs/web/css/text-overflow tells you:
this keyword value indicates display ellipsis ('…', u+2026 horizontal ellipsis) >represent clipped text.
which means both declared charset , font should back upwards u+2026
proper display.
notice authors encouraged utilize utf-8.
so please verify problem problem still exists when alter charset utf-8
, utilize font back upwards u+2026
.
the text-overflow property accepts string instead of ellipsis
(experimental) syntax can utilize firefox.
css3
Comments
Post a Comment