非常感谢@sandeep的回答。

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

非常简单的事情:只需添加/删除类text-overflow:ellipsis。

HTML:

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

CSS(和@sandeep加。cursorpointer一样)

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

首先，你做一个div标签设置宽度，在里面做p标签，然后添加文本，并应用下面给出的代码。 当你的p标签达到div标签的宽度时，“…”将被应用。

-

列表项

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

试试这个,

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

将.truncate class添加到元素中。

编辑,

上述解决方案并不是在所有浏览器中工作。你可以尝试使用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();

非常感谢@sandeep的回答。

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

非常简单的事情:只需添加/删除类text-overflow:ellipsis。

HTML:

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

CSS(和@sandeep加。cursorpointer一样)

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

你可以试试这个:

.classname { 宽度:250 px; 溢出:隐藏; 文本溢出:省略; ｝

文本溢出:省略号只工作，如果你显示1行。如果更多，你可以使用display: -webkit-box属性，以防你想显示更多一行。代码如下2行。

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