在不使用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

你可以尝试：

text-overflow: ellipsis;
-o-text-overflow: ellipsis;

这仅在您的元素不是动态大小时才有效。 他们必须有一个宽度设置或一些其他机制，以防止它们增长，以允许更多的内容。

Answer 3

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

我用了一点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) + ' ...';
        }
    }
}

Answer 4

对于所有浏览器：

.dotdot{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width:80px}
.dotdot:before { content: '';}

<div class="dotdot">[Button Text Goes here][1]</div>

Answer 5

适用于任意数量的行和任何宽度，无需任何JavaScript - 并且响应迅速。 只需将最大高度设置为行高的倍数即：（22px行高）*（最多3行文本）=（最大高度66px）。

https://codepen.io/freer4/pen/prKLPy

 html, body, p { margin: 0; padding: 0; font-family: sans-serif;line-height:22px;} .ellipsis{ overflow:hidden; margin-bottom:1em; position:relative; } .ellipsis:before { content: "\\02026"; position: absolute; bottom: 0; right:0; width: 1.8em; height:22px; margin-left: -1.8em; padding-right: 5px; text-align: right; background-size: 100% 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0), white 40%, white); z-index:2; } .ellipsis::after{ content:""; position:relative; display:block; float:right; background:#FFF; width:3em; height:22px; margin-top:-22px; z-index:3; } /*For testing*/ .ellipsis{ max-width:500px; text-align:justify; } .ellipsis-3{ max-height:66px; } .ellipsis-5{ max-height:110px; } 

 <div class="ellipsis ellipsis-3"> <p>Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to.</p> </div> <div class="ellipsis ellipsis-5"> <p>The number of lines shown is easily controlled by setting the max-height of the .ellipsis element. The downsides are the requirement of a wrapping element, and that if the text is precisely as long as your number of lines, you'll get a white area covering the very trailing end of your text. You've been warned. This is just some pushing text to make the element longer. See the ellipsis? Yay.</p> </div>