如何在带有隐藏溢出的span中显示点（“...”）？ [英] How can I show dots ("...") in a span with hidden overflow?

问题描述

我的CSS：

  #content_right_head span 
 ：inline-block; 
 width：180px; 
 overflow：hidden！important; 
} 
  

现在显示内容内容

但我想显示像
内容内容...

以显示内容后的点。

$ p

解决方案

为此，您可以使用 text-overflow：ellipsis; / code>属性。写这样

  #content_right_head span {
 display：inline-block; 
 width：180px; 
 white-space：nowrap; 
 overflow：hidden！important; 
 text-overflow：ellipsis; 
} 
  

检查此http://jsfiddle.net/Y5vpb/

My CSS:

#content_right_head span
{
  display:inline-block;
  width:180px;
  overflow:hidden !important;
}

Now it's showing content content

But I want to show like content content ...

I need to show dots after contents. Contents are coming dynamically from database.

解决方案

For this you can use text-overflow: ellipsis; property. Write like this

#content_right_head span{
    display:inline-block;
    width:180px;
    white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis;
}

Check this http://jsfiddle.net/Y5vpb/

这篇关于如何在带有隐藏溢出的span中显示点（“...”）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！