Intereting Posts
Как установить начальную высоту N детей на родительский max-height jQuery или CSS (желательно)? Html.fromHtml (String) + проблема Linebreak Как я могу получить значение формы из отключенного элемента JS – настройка цвета фона фона с использованием переменной jQuery Аккордеонный заголовок с кнопкой jQuery UI icon (скрыть / показать + навести / щелкнуть) Пользовательский SelectBox (UL-LI) с одинаковой функциональностью в HTML FORM Какой тип изображения следует использовать, когда? GIF, JPG или PNG? CSS3 скрытый div исчезает в наведении? Невозможно увидеть gradleиент при использовании prefixfree.js Как играть каждый аудио-элемент на странице (HTML, JQuery, Javascript) Как получить обратный вызов, когда пользовательский элемент * и его дети * были инициализированы Проблема вертикального выравнивания внутри div Все о … Z-Index? FileReader onload работает только во второй раз в браузерах Django возвращает 403 Error – “CSRF cookie not set”

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

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

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

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

Спасибо 🙂

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

Класс в CSS:

 .clipped { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 
 
This is a long text

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

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

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

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

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

ДЛЯ ВСЕХ Браузер:

 .dotdot{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width:80px} .dotdot:before { content: '';} 
[Button Text Goes here][1]

Работает для любого количества строк и любой ширины без 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; } 
 

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.

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.