我这里有些CSS问题。
在此图像中,我为文本“ INTENSE TRAINING”添加了CSS样式
.sample-style{
width: 100%;
overflow: hidden !important;
text-overflow: ellipsis;
white-space: nowrap; }
问题是当我添加
text-overflow: ellipsis;
它显示的是那个大的O,顶部有2个点,而不是“ ...”。谁能告诉我这是怎么回事?我在其他项目中尝试了此代码,并且可以正常工作。
这是我的标记:
<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,其中告诉您:
此关键字值指示显示省略号(“ ...”,U + 2026水平省略号)以表示剪切的文本。
这意味着声明的字符集和字体都应支持U+2026
以便正确显示。
请注意,鼓励作者使用UTF-8。
因此,当您将字符集更改为utf-8
并使用支持的字体时,请验证您的问题是否仍然存在U+2026
。
该文本溢出属性还接受一个字符串代替ellipsis
,但这个(实验)语法只能使用适用于Firefox。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句