Создание поля с прокручивающимся текстом с помощью CSS и HTML

An HTML Поле прокрутки - это поле, которое добавляет полосы прокрутки справа и снизу, когда содержимое поля больше, чем его размеры. Другими словами, если у вас есть поле, вмещающее около 50 слов, и у вас есть текст из 200 слов, поле прокрутки HTML поднимет полосы прокрутки, чтобы вы могли увидеть дополнительные 150 слов. В стандартном HTML это просто выталкивает лишний текст за пределы поля.

Сделать прокрутку HTML довольно просто. Вам просто нужно установить ширину и высота элемента, который вы хотите прокрутить, а затем используйте CSS overflow, чтобы задать способ прокрутки.

Что делать с дополнительным текстом?

Когда у вас больше текста, чем умещается в пространстве на макете, у вас есть несколько вариантов:

• Перепишите текст так, чтобы он был короче и поместился.
• Позвольте тексту выходить за рамки и надейтесь, что макет сможет его выдержать.
• Обрежьте текст там, где он выходит за край.
• Добавьте полосы прокрутки (обычно вертикальные для текста), чтобы прокрутка пробела отображала дополнительный текст.

Лучшим вариантом обычно является последний вариант: создать текстовое поле с прокруткой. Тогда дополнительный текст все еще можно будет прочитать, но ваш дизайн не будет нарушен.

HTML и CSS для этого будут:

текст здесь... 

В перелив: авто; сообщает браузеру добавить полосы прокрутки, если они необходимы, чтобы текст не выходил за границы div. Но для того, чтобы это работало, вам также понадобятся свойства стиля ширины и высоты, установленные в div, чтобы границы были переполнены.

Вы также можете обрезать текст, изменив overflow: auto; к переполнение: скрыто; Если вы не укажете свойство переполнения, текст будет выходить за границы div.

Вы можете добавить полосы прокрутки не только к тексту

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

В этом примере изображение размером 400x509 находится внутри абзаца размером 300x300.

Для таблиц можно использовать полосы прокрутки

Длинные таблицы с информацией могут быть очень трудно читать очень быстро, но если поместить их в div ограниченного размера а затем добавив свойство переполнения, вы можете создавать таблицы с большим количеством данных, которые не занимают слишком много места на вашем страница.

Самый простой способ такой же, как с изображениями и текстом, просто добавьте div вокруг таблицы, установите ширину и высоту этого div и добавьте свойство переполнения:

... 

Когда вы это делаете, обычно появляется горизонтальная полоса прокрутки, потому что браузер предполагает, что кромка полос прокрутки перекрывает таблицу. Есть много способов исправить это, изменив ширину стола и другие. Но наш любимый вариант - просто отключить горизонтальную прокрутку с помощью свойства CSS 3. переполнение-x

Просто добавь переполнение-x: скрыто; в div, и это приведет к удалению горизонтальной полосы прокрутки. Обязательно проверьте это, так как контент может исчезнуть.

Firefox поддерживает использование тегов TBODY для переполнения

Одна действительно приятная особенность браузера Firefox заключается в том, что вы можете использовать свойство переполнения во внутренних тегах таблицы, таких как tbody и thead или tfoot. Это означает, что вы можете установить полосы прокрутки для содержимого таблицы, а ячейки заголовка останутся закрепленными над ними. Это работает только в Firefox, что очень плохо, но это хорошая функция, если ваши читатели используют только Firefox. Просмотрите этот пример в Firefox, чтобы понять, что я имею в виду.

... ИмяТелефонJennifer502-5366. 

...