在div / span元素溢出上添加点/省略号，而不使用jquery [英] Add dots/ellipsis on div/span element overflow without using jquery

问题描述

需要实现与 dotdotdot 类似的功能jQuery插件
，但不能使用javascript框架（如 jquery 或ext）。

Need to implement functionality similar to what dotdotdot jQuery plugin does but cannot use javascript frameworks (like jquery or ext).

div或span元素的内容如果内容占用更多的空间，则元素应该？
（类似于css overflow：ellipsis 设置）

Is there any easy way to add the dots to the content of div or span element if content takes more space then element should??? (similar to what css overflow: ellipsis setting does)

不能使用<

谢谢：）

推荐答案

我的解决方案对我的问题看起来有点尴尬，但它适用于我：）

My solution to my problem can seem a little awkward, but it works for me:)

我使用一点CSS ：

word-wrap: break-word;

和Javascript：

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

这篇关于在div / span元素溢出上添加点/省略号，而不使用jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！