Css 文本溢出：省略号显示不同的字符

我这里有点CSS问题

在这幅图中，我为文本“强化训练”添加了CSS样式

问题是当我添加

text-overflow: ellipsis;

它显示的是上面有两个点的大O，而不是“…”。 有人能告诉我这里发生了什么事吗？我在我的另一个项目中尝试了这段代码，它很有效

这是我的标记：

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

强化训练
和冠军一起训练

请参见以下内容：

此关键字值指示显示省略号（“…”，U+2026水平省略号），以>表示剪裁文本

这意味着您的和都应该支持

U+2026

，以便正确显示

请注意，鼓励作者使用UTF-8

因此，请确认您的问题当您将字符集更改为

utf-8

并使用支持

U+2026

的字体时，问题仍然存在

---

该属性也接受字符串而不是

省略号

，但这种（实验性）语法只能用于Firefox。

刚刚在JSFIDLE中尝试过，您的代码本身就可以正常工作。这太奇怪了。顺便说一下，我使用基金会5作为我的框架。只是想知道这和它有没有关系？@Ashenvale你还记得你是怎么解决的吗？：）

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