Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:


Как в html сделать перенос строки


Перенос длинной строки в HTML, используя свойство CSS

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

Очень часто вебмастера или верстальщики забывают при верстке HTML шаблона учесть длинные строки, слова без пробелов.

Оказывается это довольно просто лечится, надо к тегу, в котором заключен текс, добавить CSS свойство: word-wrap: break-word;

Для наглядности смотрим на скриншоте, где первый вариант без, а второй с использованием этого свойства.

Список браузеров, которые нормально обрабатывают этот стиль: IE 5.5 +, Firefox 3.5 +, Chrome и Safari.

Тег HTML перенос строки

Тег указывает место переноса строки в тексте HTML страницы. Тег br ставится перед местом конца строки, текст после тега будет выведен с новой строки.

Стоит отметить, что тег устанавливает границу между строками (означает разрыв строки), а не делит текст на абзацы. Чтобы определить абзацы в тексте HTML документа используйте тег

.

Синтаксис

Текст первой строкиТекст второй строки.

Отображение в браузере

В примере далее использован разрыв строк :

Текст первой строки.Текст второй строки.

Для сравнения, разделение текста на абзацы

:

Текст первого абзаца.

Текст второго абзаца.

Пример использования в HTML коде

Это первая строка обычного текста на веб-странице. В конце перенос строки И вот уже вторая строка текста.

Поддержка браузерами

Тег
Да Да Да Да Да

by Lebedev

2.14. CSS3-текст

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

CSS3-свойства для форматирования текста

1. Обрезка строки text-overflow

Свойство позволяет ограничивать длину текста в случае, когда он не умещается в контейнер, визуально обрезая его или отображая многоточием. Свойство работает только при задании следующих условий: должна быть определена ширина контейнера, элемент должен иметь значения overflow: hidden и white-space: nowrap. Не наследуется.

text-overflow
Значения:
clip Значение по умолчанию. Текст обрезается в пределе области содержимого, при этом может отобразиться лишь часть символа.
ellipsis Замещает текст, не уместившийся в блок, с помощью многоточия.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

p { width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } Рис. 1. Обрезка текста с помощью свойства text-overflow

2. Перенос внутри слов word-break

В обычной ситуации слова переносятся на другую строку в местах пробелов или дефисов («мягкий перенос»), или же в случае принудительного переноса с использованием элемента . Данное свойство позволяет установить правила переноса внутри слов для того, чтобы длинные строки полностью заполняли пространство внутри контейнера. Не используется для CJK-языков (китайский-японский-корейский). Наследуется.

word-break
Значения:
normal Значение по умолчанию. Текст в контейнере отображается в привычном для нас виде в соответствии с правилами, установленными в языке.
break-all Пробелы в словах могут быть оформлены между любыми двумя буквами.
keep-all Запрещает разрывы между парами букв слова.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

p {word-break: normal;} p {word-break: break-all;} p {word-break: keep-all;}

3. Перенос слов в строке word-wrap

Применяется в случаях, когда текст не умещается в свой контейнер и выходит за его границу. Позволяет разрывать длинные слова и переносить их на следующую строку. Наследуется. Срабатывает лишь в случае, если значение white-space разрешает разрыв строк.

word-wrap
Значения:
normal Значение по умолчанию. Слова разрываются только по правилам, принятым в языке.
break-word Разрыв слов и перенос на следующую строку происходит в месте границы контейнера.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

p {word-wrap: normal;} p {word-wrap: break-word;}


Смотрите также



Компьютерные курсы по направлениям:

Для начинающих


A

Компьютер для начинающих: Word, Excel, Access и другие программы!

Графические пакеты


B

Популярные пакеты Adobe Photoshop, CorelDraw, ArchiCAD, AutoCAD и другие!

WEB + анимация


C

Курсы по созданию сайтов, WEB-дизайну и крутой анимации в Adobe Flash!

Бухгалтерия + делопроизводство

Сетевые технологии


E

Курсы сборки ПК, системных администраторов и защиты информации!