Мы принимаем к оплате:
«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!
«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 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. Не наследуется.
Значения: | |
clip | Значение по умолчанию. Текст обрезается в пределе области содержимого, при этом может отобразиться лишь часть символа. |
ellipsis | Замещает текст, не уместившийся в блок, с помощью многоточия. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
p { width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } Рис. 1. Обрезка текста с помощью свойства text-overflow2. Перенос внутри слов word-break
В обычной ситуации слова переносятся на другую строку в местах пробелов или дефисов («мягкий перенос»), или же в случае принудительного переноса с использованием элемента . Данное свойство позволяет установить правила переноса внутри слов для того, чтобы длинные строки полностью заполняли пространство внутри контейнера. Не используется для CJK-языков (китайский-японский-корейский). Наследуется.
Значения: | |
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 разрешает разрыв строк.
Значения: | |
normal | Значение по умолчанию. Слова разрываются только по правилам, принятым в языке. |
break-word | Разрыв слов и перенос на следующую строку происходит в месте границы контейнера. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
p {word-wrap: normal;} p {word-wrap: break-word;}