Question

我在这里遇到了一些CSS问题。

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

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

问题在于我添加

text-overflow: ellipsis;

显示顶部有2个点而不是“......”的大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>

Answer 1

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

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

这意味着您的declared charset和font都应支持U+2026才能正常显示。

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

因此，当您将字符集更改为utf-8并使用支持U+2026的字体时，请确认问题仍然存在。

text-overflow属性也接受字符串而不是ellipsis，但此（实验）语法只能用于Firefox。

text-overflow：省略号显示不同的字符

1 个答案: