Добавить точки / многоточия при переполнении элемента div / span без использования jquery

Question

Необходимо реализовать функциональность, аналогичную dotdotdot плагину jQuery, но не может использовать фреймворки javascript (например, jquery или ext).

IsЕсть ли простой способ добавить точки к содержимому элемента div или span, если контент занимает больше места, чем элемент должен ???(аналогично настройке css overflow: многоточие )

Невозможно использовать многоточие , поскольку он не работает со многими строками, когда высота ограничена.

Спасибо:)

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

Answer 3

Вы можете попробовать:

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

Это будет работать, только если ваши элементы не имеют динамического размера. Им нужно будет установить ширину или какой-то другой механизм, чтобы они не росли, чтобы обеспечить больше контента.

Answer 4

Работает для любого количества строк и любой ширины без JavaScript - и отзывчив.Просто установите максимальную высоту, кратную вашей высоте строки: т.е. (высота строки 22 пикселя) * (максимум 3 строки текста) = (максимальная высота 66 пикселей).

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>

Answer 5

ДЛЯ ВСЕХ браузеров:

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

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