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

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>

Answer 5

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

5 个答案: