Javascript 在不使用 jquery 的情况下在 div/span 元素溢出上添加点/省略号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8152527/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add dots/ellipsis on div/span element overflow without using jquery
提问by Bohdan
Need to implement functionality similar to what dotdotdotjQuery plugin does
but cannot use javascript frameworks (like jqueryor ext).
需要实现类似于dotdotdotjQuery 插件的功能，但不能使用 javascript 框架（如jquery或 ext）。
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: ellipsissetting does)
如果内容占用更多空间然后元素应该？（类似于 css溢出：省略号设置的作用）
Can't use ellipsisbeacause it doesn't work with many lines when height is limited.
不能使用省略号，因为当高度有限时它不适用于多行。
Thank you :)
谢谢 ：）
采纳答案by Bohdan
My solution to my problem can seem a little awkward, but it works for me:)
我对我的问题的解决方案似乎有点尴尬，但它对我有用:)
I used a little of CSS:
我使用了一些 CSS：
word-wrap: break-word;
and Javascript:
和 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) + ' ...';
}
}
}
回答by martinstoeckli
Why not using the CSS property text-overflow? It works great as long as you define a width in your tag.
为什么不使用 CSS 属性 text-overflow？只要您在标签中定义宽度，它就可以很好地工作。
Class in 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>You can also add the text to the titleattribute, so the user can see the whole text when hovering over the element.
您还可以将文本添加到title属性中，以便用户将鼠标悬停在元素上时可以看到整个文本。
回答by arb
You could try:
你可以试试：
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
This will only work if your elements are not dynamically sized. They will have to have a width set or some other mechanism to keep them from growing to allow more content.
这仅在您的元素未动态调整大小时才有效。它们必须设置宽度或其他一些机制来防止它们增长以允许更多内容。
回答by Randy Hall
Works for any number of lines and any width without any javascript - and is responsive. Simply set your max-height to a multiple of your line height: i.e. (22px line height) * (max 3 lines of text) = (max height 66px).
适用于任何数量的行和任何宽度，无需任何 javascript - 并且是响应式的。只需将最大高度设置为行高的倍数：即（22px 行高）*（最多 3 行文本）=（最大高度 66px）。
https://codepen.io/freer4/pen/prKLPy
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: "026";
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>回答by Harikaran K
FOR ALL Browser:
对于所有浏览器：
.dotdot{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width:80px}
.dotdot:before { content: '';}
<div class="dotdot">[Button Text Goes here][1]</div>
