Урок 5.

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

Делаем html код удобным.

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

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

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

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

Перенос строки html. Тег <br>.

Обратите внимание на рисунок. В первом варианте текст написан в одну строку, во втором варианте в две строки.

Браузер будет отображать оба варианта одинаково. Текст будет написан в одну строку:

Вы спросите, почему так? Ведь в одном из кодов часть текста перенесена на другую строку. Было бы логично если бы в браузере часть текста тоже перенеслась на другую строку, но у html своя логика в этом отношении. Если мы в html коде делаем перенос строки, то для браузера это равнозначно одному пробелу (как обычный пробел между словами в тексте). Если мы перенесем часть текста не на одну строку вниз, а на 2 или 3 (любое количество), то браузер все равно будет считать это расстояние за один обычный пробел между словами и при выводе на экран текст будет писаться в одну строку.

Тег <br>

Когда мы в третьем уроке знакомились с тегами, я упомянул, что бывают теги которые не требуют закрытия. Тег <br> один из них, служит он для переноса строки.
Давайте применим его в коде:

Мы вставили тег <br> в наш html код и теперь при запуске файла через браузер часть текста будет перенесена на следующую стоку.
* Не забываем сохранять изменения в Notepad (Ctrl + S) и обнавлять страницу в браузере (F5).

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

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

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

Ручной режим расстановки переноса

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

Расстановка переносов в Ворд 2003

В ранней 2003 версии Ворда, найти расстановку переносов можно следующим образом. Открыть вкладку «Сервис» перейти на пункт «Язык» и выбрать «Расстановка переносов…». Далее задать нужные параметры.

Автоматическая расстановка переноса в Ворд 2007-2016

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

1. Перейти во вкладку «Разметка страницы»;
2. Кликнуть по «Расстановке переносов» и выбрать «Авто»;

Настройка переноса и изменение ширины зоны

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

Изменение количества последовательных переносов

Ширина зоны переноса

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

Вариант 1. Уменьшение

Уменьшите ширину и тогда увидите, как край правого поля становится ровным.

Следует зайти в «Разметку страницы» - «Расстановка переносов» и «Параметры».

Указать маленькое значение в поле «Ширина зоны» к примеру, «0,25» и сохранить, нажав на «Ок».

Вариант 2. Увеличение

Чтобы уменьшить количество переносов, стоит увеличить ширину зоны правого края.

Неразрывный дефис

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

Номер приобретает вид довольно не эстетичный и не удобный в использовании. Изменить эту ситуацию можно посредством неразрывного пробела. Для этого нужно:

1. Напечатать цифру или букву и нажать комбинацию клавиш «Shift+Ctrl+Дефис»;
2. Повторить после каждой цифры или символа данное сочетание клавиш;
3. Не ставить между символами обычный пробел;
4. Получится вот такой результат.

Если включить «Отображение всех знаков» на вкладке «Главная», то можно заметить, что дефис преобразовался в длинное тире, и нет обычных пробелов между числами.

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

Мягкий знак переноса

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

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

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

Способ 1: использование клавиатуры

Самый простой вариант переноса на другую строку, это установить курсор перед тем отрезком, который нужно перенести, а затем набрать на клавиатуре сочетание клавиш Alt+Enter .

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

Способ 2: форматирование

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

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

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

Способ 3: использование формулы

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

Главным недостатком данного способа является тот факт, что он сложнее в выполнении, чем предыдущие варианты.

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

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

Свойство 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.