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

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

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

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

Спасибо:)

Ответы

Ответ 1

Мое решение моей проблемы может показаться немного неудобным, но оно работает для меня:)

Я использовал немного 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) + ' ...';
        }
    }
}

Ответ 2

Почему бы не использовать текстовое переполнение 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>

Ответ 3

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

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

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

Ответ 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>

Ответ 5

Работает для любого количества строк и любой ширины без javascript - и реагирует. Просто установите максимальную высоту на несколько строк вашей высоты: т.е. (Высота линии 22px) * (максимум 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>