Перенос строки css

Содержание:

Слишком длинные ссылки
Перенос строк текста в HTML через тег
Свойства
- - hyphens
  - white-space
Как реализовать запрет переноса слов CSS
Решаем проблему переноса слов с помощью HTML
Отправить статью
- - - 17 комментариев к записи
Перенос слов в CSS
Тег для начала фразы HTML с новой строки
Как реализовать CSS перенос слов
Как убрать тег ?
Управлять переносом слов при hyphens: auto;
- 15 комментариев:
Урок 5Перенос строки HTML

Слишком длинные ссылки

Я постоянно сталкивалась с проблемой слишком длинных ссылок, снова, при подготовке электронной книги (да, при публикации электронной книги это буквально худшее) с множеством целых ссылок в сносках.

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

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

Перенос строк текста в HTML через тег

Как поставить или убрать перенос слов в word

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

Вы могли также видеть этот тег и без слеша (косой черты) на конце:

Они оба одинаково выполняют свою роль, только первый является правильным (валидным) вариантом согласно спецификации XHTML 1.0 (теги, не имеющие закрывающей части, должны содержать слеш на конце).

Пример использования:

Использовать его вы можете сколько угодно раз. Одно использование – один перенос строки, соответственно, два этих тега, поставленные подряд, дают двойной перенос.

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

Сам по себе тег имеет поддержку атрибута «clear», который указывает на то, как обрабатывать следующую строку, если текст обтекает плавающий элемент.

Допустимые значения следующие:

all – отменяет обтекание элемента с обоих (левой и правой) сторон.

left – отменяет обтекание элемента с левой стороны.

right – отменяет обтекание элемента с правой стороны.

none – отменяет действие атрибута.

Пример использования:

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

Приемлемое количество подряд используемых тегов (на мой взгляд) – 1–2.

Свойства

Друзья перенос слова

В конце концов при решении проблем с переносом текста остается некий типичный «список подозреваемых». Одни довольно очевидные и логичные, а другие — нет. Одни делают свое дело сами по себе, а другие не очень.

Итак, давайте взглянем.

Свойство принимает в виде значений два ключевых слова: (по умолчанию) и . Это в дополнение к трём глобальным значениям , и .

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

В первом примере этого демо можно наглядно увидеть поведение по умолчанию:

Второй пример на этом демо включает объявление , приказывающее браузеру разбить слово перед возможным переполнением своего контейнера.

Важно заметить: было заменено на , но значения остались прежними. И взгляните

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

Я применяла для разбивки длинных слов, но правильным свойством (если вы не работаете с дальневосточным текстом) будет более общее вышеупомянутое .

hyphens

Свойство hyphens рассказывает браузеру, как расставлять дефис при переносе, и допускает следующие значения: , и , которые в настоящий момент , поэтому вам, видимо, придётся запустить FireFox.

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

При значении дефис выставляется в месте переноса только при наличии указывающего на это символа. Указать это можно, вставив символ либо жёсткого, либо мягкого переноса в нужное место в разметке.

Жёсткий перенос () прикажет слову разорваться в определённом месте при необходимости, но всё в любом случае будет отображаться на экране.

Мягкий перенос () делает тоже самое, но фактически не отображает дефис на экране, что, как правило, предпочтительнее.

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

white-space

У каждого из нас есть любимые CSS-свойства, на которые можно положиться, словно на запасной выход с надписью «При аварии разбить стекло молотком», чтобы выбраться из запутанной ситуации; см. также и . Для меня таким свойством является .

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

У этого свойства бывает пять значений: (по умолчанию), , , и .

Взглянуть на эти свойства в действии можно в примере ниже: учитывайте добавочные пробельные символы в разметке.

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

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

учитывает все пробельные символы в разметке, и не разбивает строки (как видно выше в примере 3).

(пример 4) учитывает добавочные пробелы, но заставляет строку разбиваться.

(последний пятый пример) схлопывает пробельные символы (кроме перевода строки) и принуждает «цепочку» текста умещаться в контейнер.

На CSS—Tricks есть удобная табличка, которая поможет всё это резюмировать.

Как реализовать запрет переноса слов CSS

Теги и атрибуты заголовков h1-h6, горизонтальной линии hr, переноса строки br и абзаца p по стандарту html 4.01

Иногда нужно сделать так, чтобы строка отображалась полностью без разрыва. Запрет использовать CSS перенос слов можно реализовать несколькими способами:

С помощью неразрывного пробела &nbsp, который устанавливается в местах переноса строки или слов;
Задав свойству white-space значение «nowrap» (white-space: nowrap).

Пример реализации:

<style type="text/css">
.container{
background-color: rgb(153,255,204);
padding:10px;
width:200px;
}
.content{
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
}
.nowrap
{
white-space: nowrap;	
}
</style>
</head>
<body>
<div class="container">
<p>метилпропенилендигидроксициннаменилакрилическая кислота раз</p>
<p class="content" lang="ru">метилпропенилендигидроксициннаменилакрилическая два</p>
<p class="nowrap">метилпропенилендигидроксициннаменилакрилическая кислота три</p>
<p>метилпропенилендигидроксициннаменилакрилическая&nbsp;кислота&nbsp;четыри</p>
</div>
</body>

CSSCSS

Решаем проблему переноса слов с помощью HTML

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

Использование символа мягкого разрыва — позволяет задать место разрыва сложного слова. При изменении размеров окна браузера на следующую строку переносится только часть длинного слова, стоящая после &shy, а после первой половины выводится знак переноса, похожий на дефис:

<body>
<p>Пример сложного химического соединения и текста - метилпропенилендигидрок&shy;сициннаменилакрилическая кислота</p>
</body>

Использование тега — элемент появился в HTML 5. Он также служит для указания браузеру места для разрыва сложного или длинного слова. Но в отличие от предыдущего спецсимвола этот тег не выводит в месте «разлома» знак переноса, что может негативно сказаться на читаемости всего текста:

<style type="text/css">
wbr { display: inline-block; }
</style>
</head>
<body>
<p>метилпропенилен<wbr>дигидроксицинна<wbr>менилакрилическая кислота</p>
</body>

В некоторых браузерах поддержка тега реализована некорректно. В них он будет работать, если для него в коде CSS прописано свойство display со значением inline-block.

Отправить статью

17 комментариев к записи

Интересное и главное простое решение, надо запомнить, возможно пригодится в работе.

Юрий, спасибо! Очень ценная информация. Но как понять для какого браузера выбрать нужный код?

Елена, вот список префиксов, которые работают с этим свойством в разных браузерах:

p -webkit-hyphens: auto; /* для браузера Chrome и Safari */ -moz-hyphens: auto; /* для браузера Firefox */ -ms-hyphens: auto; /* для браузера Internet Explorer 10 */ hyphens: auto; > Но вам нужно писать обязательно все 4 свойства! Чтобы во всех этих браузерах был перенос слов.

вот и начали бы с себя..

Вам неудобно читать текст на моём сайте?

ни одного переноса в статье нет)

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

Для примера я уменьшил ширину окна браузера (фото ниже):

Всё правильно человек написал:

Только это пока рабочий проект (см. – https://webref.ru/css/hyphens ), поэтому некоторый браузеры поддерживают это свойство, а некоторые – нет.

На большом мониторе под Windows – не работает, а вот на планшете Lenovo Yoga Tablet 2 – переносы работают…

Юрий, спасибо! Но у меня не перенос слов получился, а просто текст стал ровнее (каждая строчка точно вписывается от первой буквы первого слова, до последей буквы последнего в каждой строке), поразительно!

Я смотрю, это за счет увеличения пробелов. Видно у меня там еще какое-то правило прописано.

В приличных печатных изданиях переносы слов осуществляются по правилам русского языка. Видимо, CCS3 применяет какой-то общий алгоритм переноса для всех языков?

Надо для меню задать правило — переносим на новую строку все слова кроме первого.

2. Когда не помещаются

Виноват. Не для меню, а для названия модуля.

Ребят, на самом деле, если у вас не работают переносы, дело тут не в ширине окна браузера. Словарь переносов хранится в браузере и подключается только при наличии атрибута lang с кодом языка. Так, для русского языка следует добавить lang=»ru» к элементу или непосредственно к абзацу текста.

Переносы не работают в Chrome и Opera.

Единственное кросс-браузерное решение — это вставить мягкие переносы (мнемокод «») в места, где вы допускаете вставлять дефис и разбивать слово с последующим переносом в случае возможности (если ширина позволяет). Можно воспользоваться сервисом автоматической расстановки мягких переносов , вставляете, например, там текст «расставить переносы правильно» и получаете готовый html — «расставить переносы правильно» его вставляете у себя на сайте. Всё будет переноситься предсказуемо и кросс-браузерно.

Можете в сервисе ограничить длину слова в которых необходимо расставить мягкие переносы, если хотите разбивать только длинные слова. Потом можно это текст опять редактировать, просто вставив на том же сервисе туда, где его скопировали и т.д.

Источник

Перенос слов в CSS

Каскадные стили позволяют управлять переносом слов в выбранном контейнере. Для этих целей служат два свойства — word-wrap и word-break. Работу с ними и небольшие хитрости рассмотрим в данной статье.

Разбивка и перенос длинных слов.

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

На картинке мы видим, что текст вылазит за границу контейнера (элемента DIV). Для него написаны следующие свойства:

div {
width: 150px;
height: 100px;
padding: 10px;
background-color: #00f000;
}

div {

width: 150px;

height: 100px;

padding: 10px;

background-color: #00f000;

}

Если мы применим к нему дополнительно стиль

то информация, выходящая за границы будет просто обрезана. А нам нужен перенос.

Для указания, что в данном случае нам нужен перенос, воспользуемся word-wrap. По-умолчанию, значение этого свойства — normal, это соответствует случаю в примере 1. Давайте установим для него следующие значение:

div {
…
word-wrap: break-word;
}

div {

…

word-wrap: break-word;

}

Так мы достигаем желаемого результата — переноса длинного слова. Перенос выполняется с учетом внутренних отступов (

padding).

Перенос слов не по границе слов.

Если бы мы наш пример разбавили пробелами, то задавать значение word-wrap не пришлось бы, т.к. браузер автоматически выполняет нужные переносы. То есть вот так:

То как происходит разбивка управляется свойством CSS word-break. В примере 3 его значение установлено по умолчанию, оно соответствует вот такой установке:

div {
…
word-break: keep-all; /* или normal */
}

div {

…

word-break: keep-all; /* или normal */

}

Т.е. разбивка текста производится на границе слов. Но мы можем заставить браузер разбивать фразу в любом месте предложения:

div {
…
word-break: break-all;
}

div {

…

word-break: break-all;

}

Благодаря такой разбивке предложение испытало перенос посреди слова «Constant».

Специальные «непереносимые» пробелы.

Возникают ситуации, когда нужно запретить перенос слов, но и пробелы между словами оставить.

Для этого случая в HTML существует спец символ — Non-breakable-SPace — « ». Если в третьем примере мы заменим все пробелы данным символом, то получим похожую на пример № 1 картинку:

HTML код последнего примера:

<div >

very Long Word Or Constant

3.14159 26535 89793 23846 26433 83279 50288 41971

</div>

Тег для начала фразы HTML с новой строки

Для размещения текста в HTML с новой строки мы можем использовать специализированный HTML-тег , который имеет следующий синтаксис:

PHP

Текст с разрывом строки после тега

1	<pclass=»br-ex»>Текстсразрывом<br>строкипослетега<p>

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

Пример использования:

PHP

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

1
2
3

<pclass=»br-ex»>

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

Результат:

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

То есть, по сути, хоть мы и имеем несколько отдельных строк, но все они являются элементами одного тега , и соответственно, верхний и нижний отступы применяются один раз.

Как реализовать CSS перенос слов

Перед тем, как реализовать CSS перенос слов, давайте рассмотрим несколько свойств, способных разрешить основную проблему:

word-wrap – описывает, как производить перенос слов, которые по длине не помещаются в установленные размеры контейнера. Сразу стоит предупредить, что с валидацией этого свойства возникают проблемы, и с реализацией его поддержки в CSS консорциум W3C еще не определился. Поэтому специализированные валидаторы при наличии word-wrap в коде будут выдавать ошибку:

word-wrap

normal – слова не переносятся;
break-word – автоматический перенос слов;
inherit – наследование значения родителя.

Пример, иллюстрирующий применение этого свойства:

<style type="text/css">
.container{
background-color: rgb(204,204,204);
padding:10px;
width:200px;
}
.content{
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="container">
<p class="content">метилпропенилендигидроксициннаменилакрилическая кислота</p>
</div>
</body>

CSSword-wrapoverflow-wrapoverflow-wrap

Google ChromeIEoverflow-wrapCSS перенос слов

word-break – устанавливает правила переноса строк внутри контейнера, если они не помещаются в него по ширине. Это новое свойство, и его поддержка была реализована в CSS3. Оно является валидным, но предназначено для работы со строками, поэтому перенос слов может производиться грамматически неправильно.

Свойство принимает три значения:

normal – используются правила переноса, установленные по умолчанию;
word-break – перенос строк осуществляется автоматически, чтобы слово поместилось в установленные по ширине размеры контейнера;
keep-all – отключает автоматический перенос слов в китайском, японском и корейском. Для остальных языков действие значения аналогично normal.

Пример:

<style>
   .content {
   font-size: 30px; 
    background: rgb(51,204,153);
    width: 170px;
    padding: 10px;
    word-break:break-all;
   }
  </style>
 </head>
 <body> 
  <div class="content">
   <p>Синхрофазотрон</p>
   <p>Обеспокоенное состояние</p>
   <p>Одиннадцатиклассница</p>
   <p>метоксихлордиэтиламинометилбутиламин</p>
  </div>
 </body>

hyphens – новое свойство, которое появилось с выходом CSS3. Оно устанавливает, как браузер будет осуществлять перенос слов в выводимом тексте. Свойство принимает несколько значений:

none – отключает CSS перенос слов;
manual (значение по умолчанию) – слова переносятся в тех участках текстового блока, где это задано с помощью тега или мягкого переноса ();
auto – браузер автоматически переносит слова на основе своих настроек.

Для корректной работы свойства в теге <html> или должен присутствовать атрибут lang со значением «ru» (lang=»ru»).

Свойство поддерживается последними версиями IE, Opera и Firefox. Для каждого из них прописывается своя строчка CSS. Hyphens не поддерживается Google Chrome. Пример:

<style type="text/css">
.container{
background-color: rgb(153,255,204);
padding:10px;
width:200px;
}
.content{
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
}
</style>
</head>
<body>
<div class="container">
<p class="content" lang="ru">метилпропенилендигидроксициннаменилакрилическая кислота</p>
</div>
</body>

Как убрать тег ?

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

при отображении на различных мобильных устройствах.

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

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

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

Вот как это можно сделать:

PHP

@media (max-width: 780px) {
br{
display:none!important;
}
}

1
2
3
4
5

@media(max-width780px){

br{

displaynone!important;

}

Вместо 780px указываете ту ширину экрана, начиная с которой вам нужно скрыть тег .

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

PHP

.block br{
display:none!important;
}

1
2
3

.block br{

displaynone!important;

}

Более подробно о том, как делается адаптивность сайта под мобильные устройства вы можете прочитать в этой статье: Как делается адаптивная вёрстка сайта?

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

Желаю вам успехов в развитии ваших проектов!

С уважением Юлия Гусарь

Управлять переносом слов при hyphens: auto;

15 комментариев:

Анонимный Хорошая статья. Спасибо! NMitra Рада слышать! Анонимный здорово, спасибо Vit Simak white-space: pre-wrap; очень помогает, но только если он один указан или максимум с word-wrap: break-word; Анонимный ыва Людмила Горбач ваваы Максим Дунаевский Вот спасибо! Поправил свою CSS как тут написано — текст на кнопках стал нормально отображаться. NMitra Пожалуйста, рада помочь. Анонимный Спасибо, хорошая статья. Анонимный kjgtfrfghjkl Анонимный ‘); drop table forum; — lol NMitra Чего-чего? Дмитрий lang=»ru» лучше писать в

-webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; word-wrap: break-word; NMitra Спасибо за дополнение! Dmitry Mycelin «’); drop table forum; — lol»Это гугловская форма комментариев вообще-то.

Источник

Урок 5Перенос строки HTML

Содержание урока

Практикум

В ходе создания HTML-документа может возникнуть необходимость переноса строки внутри абзаца: например, при размещении отрывка из стихотворения каждая фраза должна начинаться с новой строки.

Обратите внимание, что вы не сможете изменить вид отображения текста на странице с помощью добавления в код дополнительных пробелов или переносов строки. Любое количество пробелов и переносов строк будет считаться как один пробел, так как браузер будет автоматически удалять все лишние пробелы и переносы строк.. В таких случаях самым лучшим выходом из ситуации будет использование тега (вставляет перенос строки)

Он является одним из пустых элементов, у которых нет содержимого. Пустые теги, такие как br, изначально не имеют никакого содержимого, поэтому для их использования было придумано краткое описание для представления элемента, то есть в то место, где нужно добавить разрыв строки, просто подставляется тег . Краткое описание подразумевает то, что этот тег не имеет закрывающего тега. Если не было бы краткого описания, пришлось бы каждый раз для обозначения разрыва строки писать , а разве это было бы удобнее?!

В таких случаях самым лучшим выходом из ситуации будет использование тега (вставляет перенос строки). Он является одним из пустых элементов, у которых нет содержимого. Пустые теги, такие как br, изначально не имеют никакого содержимого, поэтому для их использования было придумано краткое описание для представления элемента, то есть в то место, где нужно добавить разрыв строки, просто подставляется тег . Краткое описание подразумевает то, что этот тег не имеет закрывающего тега. Если не было бы краткого описания, пришлось бы каждый раз для обозначения разрыва строки писать , а разве это было бы удобнее?!

Примите во внимание, что краткое описание придумано и используется не из-за лени, а для повышения эффективности, за счет более легкого чтения кода. И в самом деле, спустя некоторое время, проведенное за чтением HTML-кода, вы увидите, что такие элементы легче воспринимаются и запоминаются.. Для переноса текста на несколько строк тег ставится соответствующее количество раз.

Для переноса текста на несколько строк тег ставится соответствующее количество раз.

Тег

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

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

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

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

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

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

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

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

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

<html>  <body>    <p>Это первая строка обычного текста на веб-странице. В конце перенос строки<br> И вот уже вторая строка текста.</p>  </body></html>

Тег

Тег в HTML определяет абзац. Браузеры автоматически добавляют отступы сверху и снизу от тега (обычно в размере 1em), но вы всегда можете поменять стили тега p с помощью каскадных таблиц стилей CSS. Внутри тегов абзаца может быть как простой текст, так и вложенные теги, например, ссылки <a>, строчные элементы , теги выделения текста , и другие.

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

Это текст первого абзаца со ссылкой на справочник тегов HTML внутри.

Это текст второго абзаца с выделенным словом внутри.

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

<html>  <body>    <p>Это текст первого абзаца со ссылкой на <a href="/html">справочник тегов HTML</a> внутри.</p>    <p>Это текст <span style="color: green;">второго</span> абзаца с выделенным словом внутри.</p>  </body></html>

Следующая страница Перенос строки HTML