text-overflow：省略号显示不同的字符 [英] text-overflow: ellipsis is displaying different character

问题描述

我在这里有一个CSS问题。

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

查看此图片

在此图片中，我为文本INTENSE TRAINING添加了CSS样式

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; }

问题是当我添加

text-overflow: ellipsis;

它显示大O的顶部有2个点而不是...。
任何人都可以告诉我这里发生了什么？

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.

这是我的标记：

<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>

推荐答案

请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow < a>它告诉您：

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

此关键字值表示要显示省略号（'...'，U + 2026 HORIZONTAL ELLIPSIS）剪辑文本。

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

这意味着您的 declared charset and 字体应该支持 U + 2026 以正确显示。

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

鼓励使用UTF-8。

因此，请将您的字符集更改为 utf-8 code>并使用支持 U + 2026 的字体。

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.

text-overflow 属性也接受一个字符串，而不是省略号，但这（实验性）语法只能用于Firefox。

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

这篇关于text-overflow：省略号显示不同的字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！