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

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

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

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

спасибо :)

12
constraints css html javascript overflow

5 ответов

почему бы не использовать свойство CSS text-overflow? Он отлично работает, пока вы определяете ширину в своем теге.

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

24

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

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

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

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

для всех браузеров:

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

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

работает для любого количества строк и любой ширины без javascript-и реагирует. Просто установите max-height кратным вашей высоте строки: т. е. (высота строки 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: "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>
0