Определите максимальное количество строк в div
Как я могу остановить текст, когда div останавливается?
4 ответа
Один из вариантов — струбцина. Он работает во всех браузерах, кроме IE11.
Вы можете контролировать количество отображаемых строк. При желании вы можете расширить содержимое при наведении / активном / фокусировке.
.content < margin: 0 1em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; >.content:hover, .content:active, .content:focus
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Установите определенную высоту для div а затем используйте overflow : auto; чтобы решить вашу проблему.
div.ex3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Просто используйте для этого overflow свойство в css:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. CSS свойство max-lines
Свойство max-lines используется для ограничения контента блока, указывая максимальное количество строк.
Свойство max-lines создает эффект скрепления при помощи свойства block-overflow.
Вспомним, что line-clamp является сокращенной формой записи для свойств max-lines и block-overflow .
| Значение по умолчанию | none |
| Применяется | К блокам с фрагментами. |
| Наследуется | Нет |
| Анимируемое | Нет |
| Версия | CSS3 |
| DOM синтаксис | object.style.maxLines = «2»; |
Синтаксис
max-lines: none | | initial | inherit;Пример
html> html> head> title>Заголовок документа title> style> p < overflow: hidden; box-sizing: content-box; width: 300px; font-size:16px; line-height:24px; font-family: Helvetica, sans-serif; max-lines: 3; > style> head> body> h2>Пример свойства max-lines h2> p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. p> body> html>Значения
| Значение | Описание |
|---|---|
| none | Максимальное количество строк не указано. |
| Максимальное количество строк указано. Отрицательные значения недопустимы. | |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |
Установить максимальное количество отображаемых строк для таблицы HTML
У вас есть страница JSP с динамически созданной таблицей HTML с неизвестным количеством строк. Имеет свойство на бэкэнд, которое устанавливает максимальное количество строк, например: max_rows = 15. Как ограничить число строк для таблицы HTML значением max_rows? Другая часть таблицы должна быть доступна по вертикальной прокрутке, это означает, что пользователь видит 15 строк, а если прокручивать вниз, то будет видно другие строки таблицы. Это можно сделать эмпирически, вычисляя среднюю высоту строки и используя свойство max-height для div-wrapper, но я думаю, что этот подход не очень стабилен. Поэтому нужно полагаться на количество строк. Возможно, есть плагин для такого случая или это стандартное решение CSS или HTML?
Некоторая дополнительная информация была бы ему полезна, является ли это динамически генерируемой страницей, если да, то какая структура, какой источник данных? Также вы имеете в виду лимит без прокрутки, что должно произойти, когда у вас больше строк, чем это?
5 ответов
Это можно сделать со стандартным HTML, CSS и немного javascript. Это может быть сделано для грамотно деградировать для клиентов с выключенным javascript. Под этим я подразумеваю, что они просто видят исходную таблицу, не измененную полосами прокрутки. Попробуйте что-то вроде этого:
table < width: 100%; border-collapse: collapse; >td < border: 1px solid black; >.scrollingTable blah blah blah blah blah blah blah blah Here is some long text that should wrap: blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
Это было протестировано в Firefox, Chrome и IE 7, но оно должно работать со всеми современными браузерами. Обратите внимание, что не имеет значения, насколько высока содержимое каждой строки или сколько заполняет каждую ячейку. Если вы не хотите использовать крах-коллапс: свернуть в вашей таблице, тогда вам нужно будет добавить код в цикле for, чтобы принять во внимание ячейки.
Если у вас более плотные границы, замените функцию javascript следующим образом:
function makeTableScroll() < // Constant retrieved from server-side via JSP var maxRows = 4; var table = document.getElementById('myTable'); var wrapper = table.parentNode; var rowsInTable = table.rows.length; try < var border = getComputedStyle(table.rows[0].cells[0], '').getPropertyValue('border-top-width'); border = border.replace('px', '') * 1; >catch (e) < var border = table.rows[0].cells[0].currentStyle.borderWidth; border = (border.replace('px', '') * 1) / 2; >var height = 0; if (rowsInTable > maxRows) < for (var i = 0; i < maxRows; i++) < height += table.rows[i].clientHeight + border; >wrapper.style.height = height + "px"; > > В попытке/улове используются различия между IE и другими браузерами. Код в catch для IE.