如何在隐藏溢出的范围内显示点（“…”）？

我的CSS：

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

现在它显示的内容内容

但是我想展示内容内容

内容后，我需要显示点。 内容来自数据库dynamic。

Answer 1

为此，您可以使用text-overflow: ellipsis; 属性。 这样写

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

检查这个http://jsfiddle.net/Y5vpb/

Answer 2

我认为你正在寻找text-overflow: ellipsis与white-space: nowrap组合white-space: nowrap

在这里看到更多的细节

Answer 3

如果您使用文本溢出：省略号，则浏览器将在该容器内显示任何可能的内容。 但是，如果要指定点之前的字母数量或去除某些内容并添加点，则可以使用以下function。

 function add3Dots(string, limit) { var dots = "..."; if(string.length > limit) { // you can also use substr instead of substring string = string.substring(0,limit) + dots; } return string; } 

打电话就好

 add3Dots("Hello World",9); 

输出

 Hello Wor... 

从这里采取

Answer 4

尝试这个，

 .truncate { display:inline-block; width:180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 

将.truncate类添加到您的元素。

---

编辑 ，

以上解决scheme不适用于所有浏览器。 你可以尝试使用跨浏览器支持的jQuery插件。

 (function ($) { $.fn.ellipsis = function () { return this.eachAsync({ delay: 100, bulk: 0, loop: function (index) { var el = $(this); if (el.data("fullText") !== undefined) { el.html(el.data("fullText")); } else { el.data("fullText", el.html()); } if (el.css("overflow") == "hidden") { var text = el.html(); var t = $(this.cloneNode(true)) .hide() .css('position', 'absolute') .css('overflow', 'visible') .width('auto') .height(el.height()) ; el.after(t); function width() { return t.width() > el.width(); }; var func = width; while (text.length > 0 && width()) { text = text.substr(0, text.length - text.length * 25 / 100); t.html(text + "..."); } el.html(t.html()); t.remove(); } } }); }; })(jQuery); 

如何打电话，

 $("#content_right_head span").ellipsis(); 

Answer 5

那么，“文本溢出：省略号”为我工作，但只是我的限制是基于'宽度'，我需要一个解决scheme，可以适用于行（在'高度'，而不是'宽度'）我做了这个脚本：

 function listLimit (elm, line){ var maxHeight = parseInt(elm.css('line-Height'))*line; while(elm.height() > maxHeight){ var text = elm.text(); elm.text(text.substring(0,text.length-10)).text(elm.text()+'...'); } } 

而当我必须，例如，我的h3只有两行我做：

 $('h3').each(function(){ listLimit ($(this), 2) }) 

我不知道，如果这是性能需求的最佳做法，但为我工作。

Answer 6

你可以试试这个：

 .classname{ width:250px; overflow:hidden; text-overflow:ellipsis; }