html - 如何在具有隐藏溢出的跨度中显示点（“...”）？

Question

我的 CSS：

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

现在它正在显示内容内容

但我想显示喜欢的 内容内容......

我需要在内容之后显示点。内容来自数据库动态。

Answer 1

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

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

<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span>

JSFiddle

Answer 2

如果您正在使用text-overflow:ellipsis，浏览器将尽可能显示该容器中的内容。但是，如果您想指定点之前的字母数量或删除一些内容并添加点，您可以使用以下功能。

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

在此处查看实际操作

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



console.log(add3Dots("Hello, how are you doing today?", 10));

Answer 3

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

在此处查看更多详细信息

Answer 4

试试这个，

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

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

---

编辑，

上述解决方案不适用于所有浏览器。您可以尝试使用跨浏览器支持的 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

好吧，“文本溢出：省略号”对我有用，但如果我的限制是基于“宽度”，我需要一个可以应用于线条的解决方案（在“高度”而不是“宽度”上）所以我做了这个脚本：

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 只有 2 行时，我会这样做：

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

我不知道这是否是满足性能需求的最佳实践，但对我有用。

Answer 6

text-overflow: ellipsis仅当您显示 1 行时才有效。如果更多，您可以使用display: -webkit-box属性以防您想显示更多 1 行。下面的代码为 2 行。

line-height: 1.6rem;
overflow: hidden;
display: -webkit-box; 
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
max-height: 3.2rem;

Answer 7

你可以试试这个：

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

Answer 8

 var tooLong = document.getElementById("longText").value;
    if (tooLong.length() > 18){
        $('#longText').css('text-overflow', 'ellipsis');
    }

Answer 9

如果您使用的是 ES6，则可以使用三元运算符和模板文字

function add3Dots(text, limit)
{
    return text.length > limit ? `${text.substring(0, limit)}...` : text;
}

Answer 10

首先，您制作一个 div 标签设置宽度并在其中制作 p 标签，然后向其添加文本并应用下面给出的代码。由于您的 p 标签将达到 div 标签的宽度，因此将应用“...”。

-

项目清单

`div > p{
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;}` 

Answer 11

非常感谢@sandeep 的回答。

我的问题是我想通过鼠标单击在跨度上显示/隐藏文本。因此，默认情况下会显示带点的短文本，并通过单击显示长文本。再次单击将隐藏该长文本并再次显示短文本。

很容易做：只需添加/删除带有 text-overflow:ellipsis 的类。

HTML：

<span class="spanShortText cursorPointer"  onclick="fInventoryShippingReceiving.ShowHideTextOnSpan(this);">Some really long description here</span>

CSS（与添加了 .cursorPointer 的 @sandeep 相同）

.spanShortText {
  display: inline-block;
  width: 100px;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}

.cursorPointer {
  cursor: pointer;
}

JQuery 部分 - 基本上只是删除/添加类 cSpanShortText。

  function ShowHideTextOnSpan(element) {
    var cSpanShortText = 'spanShortText';
    var $el = $(element);
    if ($el.hasClass(cSpanShortText)) {
      $el.removeClass(cSpanShortText)
    } else {
      $el.addClass(cSpanShortText);
    }
  }