在不使用jquery的情况下在div/span元素溢出上添加点/省略号

Question

需要实现类似于dotdotdot jQuery插件的功能,但不能使用javascript框架(如jquery或ext).

是否有任何简单的方法将点添加到div或span元素的内容,如果内容占用更多的空间,那么元素应该??? (类似于css 溢出:省略号设置)

不能使用省略号,因为当高度有限时,它不适用于许多行.

谢谢 :)

Answer 1

为什么不使用CSS属性文本溢出？只要在标签中定义宽度,它就可以很好地工作.

CSS中的类:

.clipped {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    

<div class="clipped" style="width: 100px;" title="This is a long text">This is a long text<div>

您还可以将文本添加到title属性中,以便用户在将鼠标悬停在元素上时可以看到整个文本.

Answer 2

我对问题的解决方案可能看起来有点尴尬，但它对我有用:)

我使用了一些 CSS：

word-wrap: break-word;

和 JavaScript：

var spans = document.getElementsByTagName("span");
for (var i in spans) {
    var span = spans[i];
    if (/*some condition to filter spans*/) { // just 
        if (navigator.appName == 'Microsoft Internet Explorer') {
            span.parentNode.style.display ='inline-block';
        }
        if (span.parentNode.clientHeight > 50 ) {
            span.innerHTML = span.innerHTML.substr(0, 26) + ' ...';
        }
    }
}