При отображении текстовых документов в браузере место переноса
строки в пределах абзаца определяется автоматически в зависимости от размера
шрифтов и размера окна просмотра. Перенос строки может осуществляться только
по символам-разделителям слов (например, пробелам). Иногда в документах требуется
задать принудительный перевод строки, реализующийся независимо от параметров
настроек браузера. Для этого служит тег принудительного перевода строки
,
который не имеет соответствующего закрывающего тега. Включение тега
в текст документа обеспечит размещение последующего текста с начала новой строки.
Например, такой подход может использоваться для создания структур типа списков
без использования специальных тегов разметки списка. Или, например, без данного
тега не обойтись для отображения стихотворений и т. п.
Приведем пример использования принудительного перевода строки (рис. 1.8):
Над омраченным Петроградом
Дышал ноябрь осенним хладом.
Плеская шумною волной
В края своей ограды стройной,
Нева металась, как больной
В своей постеле беспокойной.
А.С.Пушкин. Медный всадник
Рис. 1.8.
Тег
можно использовать для
принудительного перевода строки
В отличие от тега абзаца
При использовании тега
не будет образована пустая строка.
Использование тега
требует осторожности - возможна
ситуация, когда браузер уже сделал перевод строки за одно-два слова до того,
как встретил ваш тег
. Это бывает в случае, если ширина окна программы
просмотра читателя меньше, чем тот же параметр программы, с помощью которой
вы тестировали ваш документ. При этом может получиться, что в строке посреди
абзаца останется только одно слово, нарушая тем самым красоту компоновки документа.
Примечание
При использовании тега
для разбивки текста,
обтекающего изображения или таблицы, можно задавать параметр CLEAR, прекращающий
обтекание текста. Об этом можно прочитать в главах 3 и 4.
Теги u
Бывают ситуации, когда требуется выполнить операцию противоположного
назначения - запретить перевод строки. Для этого существует тег-контейнер
Примечание
Для обеспечения неразрывности текста, располагаемого в ячейках таблиц, существует специальный параметр NOWRAP тега
Размечая текст с помощью тега неразрывной строки
, не нуждается в закрывающем теге.
Примечание
Тег
Урок 5.
В этом уроке мы:
1. Узнаем как сделать чтобы html код был для нас более удобен и легко читаем.
2. Разберем как правильно делать перенос текстовой строки.
Делаем html код удобным.
Сейчас наш код понятен и легко читаем, так как в нем мало текста и практически нет тегов. Когда мы создадим более сложную страницу, то там будет много тегов, соответственно найти нужный будет сложно.
Чтобы не было каши из тегов, нужно изначально расставлять теги и строки так, чтобы они визуально воспринимались легче. Когда браузер считывает информацию с html страницы, ему без разницы сколько пробелов и сколько пустых строк в коде.
Я изменил текст в коде страницы относительно той, которую мы создавали, но это не важно. На левом и на правом рисунке изображен один и тот же код. Оба варианта будут отображаться браузером на экране монитора абсолютно одинаково. Согласитесь, работать с кодом изображенным справа будет гораздо легче, чем с тем, что слева.
Рассматриваемый нами код очень простой, но даже сейчас заметна разница в визуальном восприятии. Каких-либо определенных правил "наведения порядка" нет, каждый мастер сам решает как ему удобнее работать.
Перенос строки html. Тег <br>.
Обратите внимание на рисунок. В первом варианте текст написан в одну строку, во втором варианте в две строки.
Браузер будет отображать оба варианта одинаково. Текст будет написан в одну строку:
Вы спросите, почему так? Ведь в одном из кодов часть текста перенесена на другую строку. Было бы логично если бы в браузере часть текста тоже перенеслась на другую строку, но у html своя логика в этом отношении. Если мы в html коде делаем перенос строки, то для браузера это равнозначно одному пробелу (как обычный пробел между словами в тексте). Если мы перенесем часть текста не на одну строку вниз, а на 2 или 3 (любое количество), то браузер все равно будет считать это расстояние за один обычный пробел между словами и при выводе на экран текст будет писаться в одну строку.
Тег <br>
Когда мы в третьем уроке знакомились с тегами, я упомянул, что бывают теги которые не требуют закрытия. Тег <br>
один из них, служит он для переноса строки.
Давайте применим его в коде:
Мы вставили тег <br>
в наш html код и теперь при запуске файла через браузер часть текста будет перенесена на следующую стоку.
* Не забываем сохранять изменения в Notepad (Ctrl + S) и обнавлять страницу в браузере (F5).
Краткая информация
Версии CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Описание
Свойство white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является тег
Помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space имитирует работу тегаНо в отличие от него не меняет шрифт на моноширинный.Синтаксис
white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit
Значения
normal Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. nowrap Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега
переносит текст на новую строку. pre Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки. pre-line В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область. pre-wrap В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку. inherit Наследует значение родителя.Действие значений на текст представлено в табл. 1.
HTML5 CSS2.1 IE Cr Op Sa Fx
white-space Пример
Великая теорема Ферма
X n + Y n = Z n
где n - целое число > 2Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства white-space
Объектная модель
document.getElementById("elementID ").style.whiteSpace
Браузеры
Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line , pre-wrap и inherit . Для
Opera до версии 9.5 не поддерживает значение pre-line . Для
Safari до версии 3.0 и iOS не поддерживают значения pre-wrap и pre-line .
Firefox до версии 2.0 включительно не поддерживает значения pre-line и pre-wrap . Для
Если я правильно поняла, то
и
имеют разные типы.- контейнер блочного типа, аразрывает и заканчивает строку, то весьма логично решить: одна строка закончилась, началась другая. И тут же разорвать ее с помощью
больше похож на строчный, так? Хотя
вообще не похож на контейнер, и это сбивает меня с толку. Вопрос такой: если абзац определяется и форматируется с помощью тега, например:строка вообще не определена:(РазТекст, текст, много текста...а после абзаца мне захотелось добавить пустую строку, то куда вставить
: внуть контейнера::Текст, текст, много текста...или после закрывающего дескриптора
Текст, текст, много текста...
Результат у меня в броузере, вроде бы, один и тот же, но как правильно?
Мне тут, конечно, пришло в голову, что можно не выпендриваться и отформатировать абзац с помощью тегаРезультат будет как раз такой, как я хочу, но мне все-таки интересно узнать, куда же по правилам надо вставлять этот проклятый "бээр" и можно ли про него сказать, что он - контейнер строчного типа, а потому должен быть расположен внутри контейнера блочного типа, то есть
?не реагирует... (наверное, к стандартам подтягивается:)))Перенесено в Стандарты.
По-моему без разницы...
Если внутри
, то значит перевод строки относится к нему.строка вообще не определена. Но, как видно, браузеры очень часто отклоняются от предписаний стардартов... Если Вы хотите строго следовать стандартам, создавайте абзацы с помощью тегов
Если после, то значит перевод строки послеа...сам по себе разрывает и заканчивает строку (а сколько раз можно разорвать или закончить одну и ту же строку?), во второй - потому, что послеНо я бы поставила после. Внутри имеет смысл ставить, если после написанного предложения следует еще одно с новой строки...
Берём источники, смотрим:
http://html.manual.ru/book/html/body/textblocks/br.php и
http://www.w3.org/TR/html4/struct/text.html#edef-BR— не контейнер. Это элемент, который обеспечивает перевод текстовой строки и по большому счёту заменяет „родной“ перевод строки в тексте (ведь просто перевод строки, как известно, броузерами игнорируется и заменяется пробелом). Поэтому
для броузера является как бы обычным символом, и ничем иным, разве что за счёт атрибута clear ему даются некоторые дополнительные возможности.Исходя из сказанного, думаю, понятно, что конструкция:
Он купил якитори на вертелах и две высокие вощеные картонки пива.
Бросив взгляд вверх, на голограммы, он обнаружил, что грудь одной из фигур уже заливает кровь. Густой коричневый соус стекал с вертелов и капал у Кейса с пальцев.
совершенно правильна и очень жизнеспособна.Замечание: не стоит использовать
для форматирования. для форматирования и оформления текста рекомендуется использовать.
— структурный блок, который обычно предназначен для создания независимых друг от друга элементов страницы, которые иногда называются „слоями“. Также он обеспечивает более явное логическое структурирование (по крайней мере, предназначен для этого).или
http://www.w3.org/TR/html4/struct/global.html#edef-DIVАлексей совершенно прав, но я позволю себе добавить ещё немножко теории. Теория, конечно, не всегда идёт в ногу с практикой, но ведь Вас интересует именно теоретическая сторона вопроса? Так вот, элемент строчного типа
- это всего лишь указание браузеру: "разорви или закончи здесь строку". Не больше. Используя конструкцию
, Вы пытаетесь применить этот тег с совсем другой целью, с целью, для которой он не предназначен. А именно, Вы пытаетесь использовать
для создания пустой строки, или даже нет, не пустой строки, а увеличенного промежутка между строками . Этот эффект, однако, является побочным, а потому полагаться на него - плохой стиль вёрстки. Таким образом, обе конструкции по сути своей ошибочны! Теоретически, браузер должен проигнорировать тег
в обоих позициях: в первой - потому, что закрывающий тегА межстрочные расстояния регулируйте с помощью CSS . Но конечно, практически следовать этой рекомендации трудно, а порой невозможно; но это уже другая тема.
Мама... Это что же такое получилось??? Господи, откуда все эти пустые строки??? :))
Попробую еще раз... "Блокнот"пошаливает, извините, пожалуйста...Кстати,мой броузер-таки на комбинацию...
Но все-таки, как же добиться такой конструкции:
Прежде чем Кейсу удалось найти палатку, где торговали едой, пришлось сделать вокруг здания почти полный круг.Если средний абзац форматировать с помощью контейнера
То перед ним будет пустая строка, которая мне не нужна. Для моего броузера кострукция
...
работает, но она неправильна:(Все, что я хочу - окружить средний абзац тегамии, а потом вставить пустую строку. Несколько странно, что после
. (Это, естественно, претензии не к вам, уважаемые эксперты, день и ночь отвечающие на наши безумные вопросы:), а к HTML -ю и ко всем прочим... броузерам) Я, собственно, всю свою недолгую жизнь среди HTML не могла понять, чем отличаютсяИ
, и верила, что вот как раз этими лишними пустыми строками, то есть, добавлением их. Но вы меня убедили, что это не так:)разрывает и заканчивает строку,
Так значит, окружать, средний абзац , а потом как-то за счет межстрочного расстояния убирать лишнюю пустую строку, которая появляется в таком случае перед ним? Но как? Можно тогда поподробнее, на примере?Я все-равно не понял, где этот "средний" абзац...
...
Не пойму, в чем сложность вставить
в нужном месте? Между теми же или
" Кейс был очень, очень голоден.
В таком состоянии он, казалось, мог бы проглотить слона.
Прежде чем Кейсу удалось найти палатку, где торговали едой, пришлось сделать вокруг здания почти полный круг.
Он купил якитори на вертелах и две высокие вощеные картонки пива.
Бросив взгляд вверх, на голограммы, он обнаружил, что грудь одной из фигур уже заливает кровь. Густой коричневый соус стекал с вертелов и капал у Кейса с пальцев.Но это зрелище оставило его безучастным.
Он съел все до последнего кусочка и с удовольствием запил якитори пивом."
Первый абзац:
Кейс был очень, очень голоден.
В таком состоянии он, казалось, мог бы проглотить слона.Второй абзац, он же средний:
Прежде чем Кейсу удалось найти палатку, где торговали едой, пришлось сделать вокруг здания почти полный круг.
Он купил якитори на вертелах и две высокие вощеные картонки пива.
Бросив взгляд вверх, на голограммы, он обнаружил, что грудь одной из фигур уже заливает кровь. Густой коричневый соус стекал с вертелов и капал у Кейса с пальцев.Третий:
Но это зрелище оставило его безучастным.
Он съел все до последнего кусочка и с удовольствием запил якитори пивом.Дмитрий, Вы мне мою пустую строку обеспечиваете за счет того, что третий абзац в контейнер
Заключаете, ну а если это не удобно? Если абзацев в тексте много, а это проклятая пустая строка должна встретиться только один раз в указанном месте? (то есть, если третий абзац так оформлять, то когда он закончится, будет разрыв и пустая строка, а мне этого не нужно) К тому же вот граждане пишут, что вообще лучше
не использовать для форматирования, а Вы использовали...строка вообще неС точки зрения теории (а в этом разделе мы говорим о теории, а о практике лишь постольку поскольку), так вот, с точки зрения теории в HTML пустых строк не бывает. Вообще! Строка - это комбинация линейно расположенных символов; нет символов - и строки не может быть. Поэтому-то аргумент
> Несколько странно, что после
> определена:(Раз
> то весьма логично решить: одна строка закончилась,
> началась другая. И тут же разорвать ее с помощью
.неприемлем: нельзя разорвать несуществующую "пустую строку", нельзя разорвать то, чего нет. Чтобы строка всё-таки обрела существование, нужно вставить в неё хоть какой-нибудь символ. Если вставить, появится ощущение "пустой строки" и всё будет законно (хотя и нелогично). Алина, теоретически Вам нужна не пустая строка - Вам нужно увеличенное расстояние между строками (интерлиньяж). Тег
В большинстве броузеров по умолчанию создаёт перед собой удвоенный относительно базового интерлиньяж. Если Вы хотите строго придерживаться теории и принципов логической разметки, абзацы следует создавать с помощью тега
С соответствующими стилями (margin-top для верхнего отступа, line-height для высоты строк внутри абзаца).
Но это теория. Большинство практиков используют фактическое поведение браузеров, не вдаваясь в теоретические тонкости. Т. е. устанавливают удвоенный интерлиньяж с помощью комбинации
(хотя по закону второй
должен игнорироваться), мешаютИ
и всякими прочими способами добиваются визуальных эффектов , опираясь на в принципе ошибочную интерпретацию браузерами языка логической разметки HTML. И зачастую это оправдано - просто потому, что язык визуальной разметки CSS реализован в браузерах ещё хуже HTML, и полагаться на него очень часто нельзя...Так... Вмешаюсь.
Алина, если вы хотите, чтобы у вас всё выглядело так, как вам нужно — это одно. Если вам нужно, чтобы вёрстка следовала правилам и высокой логике HTML — это совсем другое. Более того, часто одно с другим не совпадает.Теперь по делу. Если вам нужно, чтобы абзацев было много, а пробел был только в одном месте, вы вполне можете сложить весь текст в один [абзац
Слой
(нужное подчеркнуть)]. (см. мой первый пример с фрагментом из „Нейромансера“ У.Гибсона)
Так абзац будет у вас только один (реально), но выглядеть вы можете его заставить по-всякому, за счёт
. В том месте, где вам нужен будет пустая строка,
будет стоять два раза подряд.
Но это, как вы понимаете, нарушает логику HTML.Идём дальше. У нас есть такая прекрасная вещь, как стилевое оформление документов, и определив для нашего абзаца margin:0px, мы получим именно то, что нужно — нулевой отступ между абзацами. (сразу прошу прощения за избыточный объём, но для наглядности мне пришлось использовать несколько абзацев. Скопируйте пример в html-страницу и просмотрите)
Прежде чем Кейсу удалось найти палатку, где торговали едой, пришлось сделать вокруг здания почти полный круг. Он купил якитори на вертелах и две высокие вощеные картонки пива. Бросив взгляд вверх, на голограммы, он обнаружил, что грудь одной из фигур уже заливает кровь. Густой коричневый соус стекал с вертелов и капал у Кейса с пальцев.
Башни ее и поля, разбросанные в бесцветном псевдопространстве
симуляционной матрицы - всего лишь электронная видимость, облегчающая
процесс управления и обмен огромными объемами данных. Законным
программистам дела нет до тех стен из льда, позади которых они работают,
стен тьмы, которые скрывают их операции от других - артистов
индустриального шпионажа и деловых ребят вроде Бобби Квинна.
Бобби был ковбоем. Он был хакером, вором-взломщиком, потрошившим
разветвленную электронную нервную систему человечества. Он присваивал
информацию и кредиты в переполненной матрице, монохромном
псевдопространстве, где, как редкие звезды во тьме, светились плотные
сгустки данных, мерцали галактики корпораций и отсвечивали холодным
блеском спирали военных систем.
Бобби был одним из тех потерявшихся во времени лиц, которых всегда
застанешь за выпивкой в "Джентльмене-Неудачнике", популярном в городе
баре, пристанище для электронных ковбоев, дельцов и прочих ребят, хоть
каким-то боком связанных с кибернетикой.
Мы были партнерами.
Замечание в тему: если использовать предыдущий, „неверный“ вариант, то отступ между строками иногда хочется сделать меньше или больше одного
. В этом случае используется распорка, которая и обеспечит иллюзию половинного или полуторного интервала.Раз уж зашла речь о "теории", то замечу, что в подобная конструкция противоречит правилам русского языка (и не только русского). Поэтому, уподобляясь остальным “теоретикам” предложу: "Прежде чем думать о верстке, убедитесь, что это не протеворечит правилам "человеческого" языка". :)
Гениальная мысль - текст представить в виде графики.
И все те проблемы будут решены.
Другая мысль - попробовать в SVG.
Третья - какого..... до сих пор никто не проработал управление переносами в словах?
В CSS2 какое-то подобие заложили, да что толку....Управление переносами крайне проблематично. Для автоматической расстановки переносов браузер должен знать правила грамматики соответствующего языка, что в функции браузера не входит и в принципе входить не должно. Остаются "мягкие" переносы, "зашитые" в сам текст. Для этого уже есть символ - , который, правда, пока не всеми браузерами понимается. О расстановке "мягких" переносов должен заботиться автор/редактор текста, или его можно поручить серверу, "знающему" правила расстановки переносов.
Часто требуется внутри одной ячейки Excel сделать перенос текста на новую строку. То есть переместить текст по строкам внутри одной ячейки как указано на картинке. Если после ввода первой части текста просто нажать на клавишу ENTER, то курсор будет перенесен на следующую строку, но другую ячейку, а нам требуется перенос в этой же ячейке.
Это очень частая задача и решается она очень просто — для переноса текста на новую строку внутри одной ячейки Excel необходимо нажать ALT+ENTER (зажимаете клавишу ALT, затем не отпуская ее, нажимаете клавишу ENTER)
Как перенести текст на новую строку в Excel с помощью формулы
Иногда требуется сделать перенос строки не разово, а с помощью функций в Excel. Вот как в этом примере на рисунке. Мы вводим имя, фамилию и отчество и оно автоматически собирается в ячейке A6
В открывшемся окне во вкладке «Выравнивание» необходимо поставить галочку напротив «Переносить по словам» как указано на картинке, иначе перенос строк в Excel не будет корректно отображаться с помощью формул.
Как в Excel заменить знак переноса на другой символ и обратно с помощью формулы
Можно поменять символ перенос на любой другой знак , например на пробел, с помощью текстовой функции ПОДСТАВИТЬ в Excel
Рассмотрим на примере, что на картинке выше. Итак, в ячейке B1 прописываем функцию ПОДСТАВИТЬ:
ПОДСТАВИТЬ(A1;СИМВОЛ(10); " ")
A1 — это наш текст с переносом строки;
СИМВОЛ(10) — это перенос строки (мы рассматривали это чуть выше в данной статье);
" " — это пробел, так как мы меняем перенос строки на пробелЕсли нужно проделать обратную операцию — поменять пробел на знак (символ) переноса, то функция будет выглядеть соответственно:
ПОДСТАВИТЬ(A1; " ";СИМВОЛ(10))
Напоминаю, чтобы перенос строк правильно отражался, необходимо в свойствах ячеек, в разделе «Выравнивание» указать «Переносить по строкам».
Как поменять знак переноса на пробел и обратно в Excel с помощью ПОИСК — ЗАМЕНА
Бывают случаи, когда формулы использовать неудобно и требуется сделать замену быстро. Для этого воспользуемся Поиском и Заменой. Выделяем наш текст и нажимаем CTRL+H, появится следующее окно.
Если нам необходимо поменять перенос строки на пробел, то в строке «Найти» необходимо ввести перенос строки, для этого встаньте в поле «Найти», затем нажмите на клавишу ALT , не отпуская ее наберите на клавиатуре 010 — это код переноса строки, он не будет виден в данном поле .
После этого в поле «Заменить на» введите пробел или любой другой символ на который вам необходимо поменять и нажмите «Заменить» или «Заменить все».
Кстати, в Word это реализовано более наглядно.
Если вам необходимо поменять символ переноса строки на пробел, то в поле «Найти» вам необходимо указать специальный код «Разрыва строки», который обозначается как ^l
В поле "Заменить на: " необходимо сделать просто пробел и нажать на «Заменить» или «Заменить все».Вы можете менять не только перенос строки, но и другие специальные символы, чтобы получить их соответствующий код, необходимо нажать на кнопку "Больше >> ", «Специальные» и выбрать необходимый вам код. Напоминаю, что данная функция есть только в Word, в Excel эти символы не будут работать.
Как поменять перенос строки на пробел или наоборот в Excel с помощью VBA
Рассмотрим пример для выделенных ячеек. То есть мы выделяем требуемые ячейки и запускаем макрос
1. Меняем пробелы на переносы в выделенных ячейках с помощью VBA
Sub ПробелыНаПереносы()
For Each cell In Selection
cell.Value = Replace (cell.Value, Chr (32) , Chr (10) )
Next
End Sub2. Меняем переносы на пробелы в выделенных ячейках с помощью VBA
Sub ПереносыНаПробелы()
For Each cell In Selection
cell.Value = Replace (cell.Value, Chr (10) , Chr (32) )
Next
End SubКод очень простой Chr (10) — это перенос строки, Chr (32) — это пробел. Если требуется поменять на любой другой символ, то заменяете просто номер кода, соответствующий требуемому символу.
Коды символов для Excel
Ниже на картинке обозначены различные символы и соответствующие им коды, несколько столбцов — это различный шрифт. Для увеличения изображения, кликните по картинке.
Статьи по темеЕще статьи из этой рубрики