и CSS.

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

Свойство word-wrap

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

Получился громоздкий и уродливый код, от которого у любого разработчика случится культурный шок. И как поступить, если вы захотите, чтобы в десктопной версии логотип располагался горизонтально, а при ширине экрана менее 550 пикселей вертикально? Поэтому для настройки внешнего вида элементов всегда используйте каскадные таблицы стилей. Тем более с помощью инструментов CSS перенос строки осуществляется более элегантным способом. При этом не возникает избыточной разметки, которая только уменьшает скорость загрузки страниц.

Первое свойство, к которому стоит обратиться для обработки текста, — это word-wrap. Принимает три значения: normal, break-all и keep-all. Вам для работы понадобится запомнить только break-all. Normal стоит по умолчанию, и его нет смысла указывать. Keep-all означает в документе CSS запрет переноса строки. Разработано специально для китайских, японских и корейских иероглифов. Поэтому, если вы не собираетесь вести блог на каком-то из этих языков, свойство вам не пригодится. А также оно не поддерживается браузером Safari и мобильными телефонами на базе iOS.

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

P{ font: bold 30px Helvetica, sans-serif; width: 25px; word-wrap: break-all; }

Ширина и размер шрифта подбирается таким образом, чтобы места хватало только для одной буквы. Word-wrap со значением break-all сообщает браузеру, что слово нужно каждый раз переносить на новую строку. Незаменимым это свойство назвать нельзя. Но оно пригодится при оформлении небольших блоков с текстом, например полей для ввода комментариев.

Свойство white-space

Распространенная ошибка начинающих веб-разработчиков — пытаться редактировать текст пробелами или нажатиями клавиши Enter, а потом удивляться, почему их усилия не видны на странице. Сколько бы вы раз ни нажали "Ввод", браузер это проигнорирует. Но есть способ заставить его отображать текст так, как нужно вам, и принимая во внимание все интервалы.

В документе CSS перенос строки, назначенный с помощью свойства white-space, можно настроить так, чтобы он осуществлялся с учетом пробелов или нажатия клавиши "Ввод". White-space со значением pre-line заставит браузер видеть в тексте Enter.

Если поменять pre-line на pre-wrap в коде CSS, перенос строки произойдет с учетом пробелов. И наоборот, запретить любой перенос, присвоив тексту свойство white-space со значением nowrap:

#wrapper p{ color: #FFF; padding: 10px; font: bold 16px Helvetica, sans-serif; white-space: nowrap; }

Text-overflow

Еще один полезный инструмент для работы с текстом — это text-overflow. Помимо переноса строки, CSS-свойство позволяет обрезать контент, когда контейнер переполнен. Принимает два значения:

• clip — просто обрезает текст;
• ellipsis — добавляет многоточие.

#wrapper p{ color: #FFF; padding: 10px; font: bold 16px Helvetica, sans-serif; text-overflow: ellipsis;/*Добавляем многоточие*/ white-space: nowrap; /* Запрещаем перенос строк */ overflow: hidden;/*Прячем все что выходит за рамки контейнера*/ }

Чтобы свойство работало, элементу также необходимо назначить запрет на перенос строки и overflow со значением hidden.

Часто требуется внутри одной ячейки 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 Sub

2. Меняем переносы на пробелы в выделенных ячейках с помощью VBA

Sub ПереносыНаПробелы()
For Each cell In Selection
cell.Value = Replace (cell.Value, Chr (10) , Chr (32) )
Next
End Sub

Код очень простой Chr (10) — это перенос строки, Chr (32) — это пробел. Если требуется поменять на любой другой символ, то заменяете просто номер кода, соответствующий требуемому символу.

Коды символов для Excel

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

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

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

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

Пробелы и пробельные символы в HTML

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

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

Чтобы перенести строки внутри абзаца P , нужно воспользоваться одиночным тегом BR, с помощью которого это можно осуществить. Скажем, нам нужно вставить в текст какие-нибудь строчки из стихотворения, которые мы пишем в текстовом редакторе:

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

Чтобы добиться такого же отображения в окне веб-обозревателя, нужно в каждом месте переноса строки прописать BR:

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

Таким образом, нужные переносы строк выполнены. Здесь еще нужно отметить такую особенность, что множественные пробелы, идущие один за другим, веббраузер отображает как один. В этом вы сможете убедиться, если в том же редакторе попробуете поставить не один, а несколько пробелов между двумя словами и, нажав на кнопку «Сохранить», посмотрите на результат в браузере.

Пробел, табуляция и перенос строки

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

• Пробел - самая широкая клавиша на клавиатуре компьютера (без надписи);
• Табуляция - клавиша слева с надписью «Tab» и двумя стрелками, направленными в разные стороны;
• Перенос строки - клавиша «Enter».

Однако, как я сказал выше, конечный нужный результат не только в текстовом редакторе, но и в браузере, мы получаем лишь при использовании первой клавиши. Все три клавиши (в том числе табуляция и перенос строки полезно использовать при форматировании кода HTML. Допустим, вот как выглядит фрагмент кода в NotePad++ ( об этом редакторе толковый материал) при отображении всех пробельных символов:

Мы получаем код, который легко читаем и понятен благодаря пробелам. Оранжевыми стрелками отмечены отступы, создаваемые с помощью клавиши Tab, а символами CR и LF переносы строк, осуществляемые посредством кавиши Enter.

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

Таким же образом с помощью пробельных символов можно прописать и правила CSS, которые будут визуально выглядеть понятными и удобоваримыми:

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

Спецсимволы (или мнемоники) в коде HTML

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

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

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

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

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

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

символ	код	мнемоника	описание
			неразрывный пробел
			узкий пробел (еn-шириной в букву n)
			широкий пробел (em-шириной в букву m)
–	-	–	узкое тире (en-тире)
-	—	—	широкое тире (em -тире)
­	-	­	мягкий перенос
а́		́	ударение, ставится после "ударной" буквы
©		©	копирайт
®	®	®	знак зарегистрированной торговой марки
™	™	™	знак торговой марки
º	º	º	копье Марса
ª	ª	ª	зеркало Венеры
‰	‰	‰	промилле
π	π	π	пи (используйте Times New Roman)
¦	¦	¦	вертикальный пунктир
§	§	§	параграф
°	°	°	градус
µ	µ	µ	знак "микро"
¶	¶	¶	знак абзаца
…	…	…	многоточие
‾	‾	‾	надчеркивание
´	´	´	знак ударения
№		№	знак номера
🔍		🔍	Лупа (наклонённая влево)
🔎		🔎	Лупа (наклонённая вправо)
знаки арифметических и математических операций
×	×	×	умножить
÷	÷	÷	разделить
<	<		меньше
>	>	>	больше
±	±	±	плюс/минус
¹	¹	¹	степень 1
²	²	²	степень 2
³	³	³	степень 3
¬	¬	¬	отрицание
¼	¼	¼	одна четвертая
½	½	½	одна вторая
¾	¾	¾	три четверти
⁄	⁄	⁄	дробная черта
−	−	−	минус
≤	≤	≤	меньше или равно
≥	≥	≥	больше или равно
≈	≈	≈	приблизительно (почти) равно
≠	≠	≠	не равно
≡	≡	≡	тождественно
√	√	√	квадратный корень (радикал)
∞	∞	∞	бесконечность
∑	∑	∑	знак суммирования
∏	∏	∏	знак произведения
∂	∂	∂	частичный дифференциал
∫	∫	∫	интеграл
∀	∀	∀	для всех (видно только если жирным шрифтом)
∃	∃	∃	существует
∅	∅	∅	пустое множество
Ø	Ø	Ø	диаметр
∈	∈	∈	принадлежит
∉	∉	∉	не принадлежит
∋	∋	∗	содержит
⊂	⊂	⊂	является подмножеством
⊃	⊃	⊃	является надмножеством
⊄	⊄	⊄	не является подмножеством
⊆	⊆	⊆	является подмножеством либо равно
⊇	⊇	⊇	является надмножеством либо равно
⊕	⊕	⊕	плюс в кружке
⊗	⊗	⊗	знак умножения в кружке
⊥	⊥	⊥	перпендикулярно
∠	∠	∠	угол
∧	∧	∧	логическое И
∨	∨	∨	логическое ИЛИ
∩	∩	∩	пересечение
∪	∪	∪	объединение
знаки валют
€	€	€	Евро
¢	¢	¢	Цент
£	£	£	Фунт
¤	¤t;	¤	Знак валюты
¥	¥	¥	Знак йены и юаня
ƒ	ƒ	ƒ	Знак флорина
маркеры
	.		простой маркер
○		○	круг
·	·	·	средняя точка
†		†	крестик
‡		‡	двойной крестик
♠	♠	♠	пики
♣	♣	♣	трефы
			червы
♦	♦	♦	бубны
◊	◊	◊	ромб
✏		✏	карандаш
✎		✎	карандаш
✐		✐	карандаш
✍		✍	рука
кавычки
"	"	"	двойная кавычка
&	&	&	амперсанд
«	«	«	левая типографская кавычка (кавычка-елочка)
»	»	»	правая типографская кавычка (кавычка-елочка)
‹		‹	одиночная угловая кавычка открывающая
›		›	одиночная угловая кавычка закрывающая
′	′	′	штрих (минуты, футы)
″	″	″	двойной штрих (секунды, дюймы)
‘	‘	‘	левая верхняя одиночная кавычка
’	’	’	правая верхняя одиночная кавычка
‚	‚	‚	правая нижняя одиночная кавычка
“	“	“	кавычка-лапка левая
”	”	”	кавычка-лапка правая верхняя
„	„	„	кавычка-лапка правая нижняя
❛		❛	одиночная английская кавычка открывающая
❜		❜	одиночная английская кавычка закрывающая
❝		❝	двойная английская кавычка открывающая
❞		❞	двойная английская кавычка закрывающая
стрелки
←	←	←	стрелка влево
			стрелка вверх
→	→	→	стрелка вправо
↓	↓	↓	стрелка вниз
↔	↔	↔	стрелка влево и вправо
↕		↕	стрелка вверх и вниз
↵	↵	↵	возврат каретки
⇐	⇐	⇐	двойная стрелка влево
⇑	⇑	⇑	двойная стрелка вверх
⇒	⇒	⇒	двойная стрелка вправо
⇓	⇓	⇓	двойная стрелка вниз
⇔	⇔	⇔	двойная стрелка влево и вправо
⇕		⇕	двойная стрелка вверх и вниз
▲		▲	треугольная стрелка вверх
▼		▼	треугольная стрелка вниз
			треугольная стрелка вправо
◄		◄	треугольная стрелка влево
звездочки, снежинки
☃		☃	Снеговик
❄		❄	Снежинка
❅		❅	Зажатая трилистниками снежинка
❆		❆	Жирная остроугольная снежинка
★		★	Закрашенная звезда
☆		☆	Незакрашенная звезда
✪		✪	Незакрашенная звезда в закрашенном круге
✫		✫	Закрашенная звезда с незакрашенным кругом внутри
✯		✯	Вращающаяся звезда
⚝		⚝	Начерченная белая звезда
⚪		⚪	Средний незакрашенный круг
⚫		⚫	Средний закрашенный круг
⚹		⚹	Секстиле (типа снежинка)
✵		✵	Восьмиконечная вращающаяся звезда
❉		❉	Звёздочка с шарообразными окончаниями
❋		❋	Жирная восьмиконечная каплеобразная звёздочка-пропеллер
✺		✺	Шестнадцатиконечная звёздочка
✹		✹	Двенадцатиконечная закрашенная звезда
✸		✸	Жирная восьмиконечная прямолинейная закрашенная звезда
✶		✶	Шестиконечная закрашенная звезда
✷		✷	Восьмиконечная прямолинейная закрашенная звезда
✴		✴	Восьмиконечная закрашенная звезда
✳		✳	Восьмиконечная звёздочка
✲		✲	Звёздочка с незакрашенным центром
✱		✱	Жирная звёздочка
✧		✧	Заострённая четырёхконечная незакрашенная звезда
✦		✦	Заострённая четырёхконечная закрашенная звезда
⍟		⍟	Звезда в круге
⊛		⊛	Снежинка в круге
часы, время
⏰		⏰	Часы
⌚		⌚	Часы
⌛		⌛	Песочные часы
⏳		⏳	Песочные часы

Случаи использования некоторых спецсимволов, в том числе неразрывного пробела и мягкого переноса

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

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