В данном уроке мы разберем процесс создания адаптивной галереи миниатюр. Рассмотрим, как добиться решения определенных задач и обойти проблемы, которые могут проявиться в контексте большого проекта.
Введение
Прежде, чем окунуться в процесс, рассмотрим, что мы получим в результате работы. При показе демонстрационной страницы нужно изменить ширину окна браузера, чтобы увидеть реакцию нашего кода.
Стиль контейнера
Начнем создавать наш код CSS с задания ширины контейнера и центрирования его на странице. Таким образом, мы получим отличное, широкое пространство для работы с галереей:
Обратите внимание, что ширина установлена в процентах. Так мы получаем использование всего доступного пространства и гибкий шаблон. Нам нужно, чтобы дизайн смотрелся не только в нескольких определенных точках, а адаптировался к любому окну просмотра.
Основные стили галереи
Теперь перейдем к определению стилей для класса galleryItem . Установим цвет текста, размер шрифта и будем смещать элементы влево.
GalleryItem { color: #797478; font: 10px/1.5 Verdana, Helvetica, sans-serif; float: left; } .galleryItem h3 { text-transform: uppercase; } .galleryItem img { max-width: 100%; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
Также здесь заданы стили для изображений. Устанавливая свойство изображений max-width в значение 100%, мы получаем в результате адаптацию размера при уменьшении ширины окна просмотра. Также для картинок скругляются углы.
Работаем с колонками
Это наиболее важная часть нашего урока. Нужно разобраться как устанавливать ширину и поля для каждого элемента в галерее. Так все элементы располагаются в контейнере, то нужно использовать процентные размерности, чтобы они адаптировались к изменениям окна просмотра.
В дизайне демонстрационной страницы мы будем использовать пять колонок. разберемся с математикой для расчета полей. Между колонками будет поле шириной 4%. Умножив на 5, мы увидим, что 20% ширины уходит на поля. На содержание остается только 80%. То есть каждая колонка будет 16% шириной.
Теперь мы можем вставить данные значения в код CSS. Каждый классgalleryItem представляет одну колонку, то есть ширина будет 16% и поле 2% для каждой стороны, что в сумме даст 4%.
GalleryItem { color: #797478; font: 10px/1.5 Verdana, Helvetica, sans-serif; float: left; width: 16%; margin: 2% 2% 50px 2%; }
Данный набор стилей создаст отличный пятиколоночный шаблон, который будет хорошо смотреться на экранах размера 13 дюймов и больше.
Где шаблон будет смотреться коряво?
К сожалению, данный шаблон будет ломаться при уменьшении размера страницы. При ширине меньше 500px он становится абсолютно нечитаемым и корявым.
Для решения задачи мы будем использовать медиа запросы для переопределения подходящего размера колонок.
Определение критических точек
Существует множество решений для определения критических точек, на которых следует сосредоточиться при разработке дизайна. Рынок заполнен различными устройствами с разным размером экрана, и очень непросто учесть все возможные варианты.
Для упрощения задачи отбросим мысли о том, какой размер экрана наиболее популярен, и дадим возможность нашему шаблону самому определять критические точки. Если проанализировать точки, в которых шаблон ломается, мы сможем зафиксировать данные области и сделаем наш шаблон адаптирующимся под любое устройство.
Как определить критические точки?
Самый лучший способ - открыть страницу в браузере и уменьшать размер окна. Технически, наш шаблон никогда не сломается, так как будет изменяться масштаб. Однако, при размере окна около 940px колонка текста станет слишком узкой для гармоничного размещения текста:
Для исправления ситуации в данной точке надо сделать четыре колонки вместо пяти. Изменив ширину колонки до 21% мы решим задачу. Так как используются оба свойства “max-width ” и “max-device-width ”, то дизайн будет меняться и при изменении окна браузера и на устройствах с размером экрана меньше установленных значений.
@media only screen and (max-width: 940px), only screen and (max-device-width: 940px){ .galleryItem {width: 21%;} }
Добавление данного стиля решает задачу. Наш пяти колоночный дизайн отлично работает на экранах шире 940px, а для более узких превращается в четырех колоночный шаблон.
Операцию повторить
Теперь повторяем описанный выше процесс снова и снова. Уменьшаем размер окна и смотрим, когда дизайн перестанет функционировать. Следующая точка обнаруживается на 720px. Нужно изменить ширину колонки до 29.33%, чтобы получить трехколоночный шаблон:
@media only screen and (max-width: 720px), only screen and (max-device-width: 720px){ .galleryItem {width: 29.33333%;} }
Продолжаем процесс до получения одной колонки (размер окна приблизительно равен размеру экрана iPhone). Вот полный набор медиа запросов.
/* MМЕДИА ЗАПРОСЫ*/ @media only screen and (max-width: 940px), only screen and (max-device-width: 940px){ .galleryItem {width: 21%;} } @media only screen and (max-width: 720px), only screen and (max-device-width: 720px){ .galleryItem {width: 29.33333%;} } @media only screen and (max-width: 530px), only screen and (max-device-width: 530px){ .galleryItem {width: 46%;} } @media only screen and (max-width: 320px), only screen and (max-device-width: 320px){ .galleryItem {width: 96%;} .galleryItem img {width: 96%;} .galleryItem h3 {font-size: 18px;} .galleryItem p, {font-size: 18px;} }
Заключение
Теперь у нас есть отличная адаптивная галерея миниатюр, которая великолепно выглядит на любом устройстве или в любом окне браузера.
Вместо разработки шаблона под конкретный наиболее популярный медиа запрос мы анализировали функционирование нашего дизайна при уменьшении окна браузера и вносили изменения в критических точках, чтобы восстановить внешний вид.
Почему-то мне как-то особенно «везет» на странные, неожиданные фокусы с переносом текста.
Я написала электронную книгу, и решать, как переносить строки кода в блоках - это был кошмар! Порой блок текста из-за переноса выбивался по высоте из контейнера. А одни слишком длинные ссылки чего стоили!
Вставлять дефис в месте переноса или нет? Здесь переносим, там не переносим. Тут вставляем дефис, там нет. Одно свойство ни в какую не хочет работать без другого. И почему этот горизонтальный скроллинг упорно не хочет пропадать?
/me бьется об стол
Бывает множество ситуаций, с которыми здесь можно столкнуться, требующие слегка разного подхода к оформлению стилями, так что в этой статье мы рассмотрим типичные свойства, используемые для решения таких проблем, а также пару сценариев из реальной жизни, в которых, по-моему, особенно ярко проявляются проблемы с переносом/переполнением текста.
Свойства
В конце концов при решении проблем с переносом текста остается некий типичный «список подозреваемых». Одни довольно очевидные и логичные, а другие - нет. Одни делают свое дело сами по себе, а другие не очень.
Итак, давайте взглянем.
word-wrap / overflow-wrap
Свойство word-wrap принимает в виде значений два ключевых слова: normal (по умолчанию) и break-word . Это в дополнение к трём глобальным значениям inherit , initial и unset .
По умолчанию слишком длинное слово не разрывается. Браузер не влияет на такое слово, что выглядит замечательно, пока мы не сталкиваемся с мобильными. Хотя размер контейнера может подстраиваться под слово, оно в итоге вывалится из его границ и приведёт к страшной горизонтальной прокрутке на всей странице.
В первом примере этого демо можно наглядно увидеть поведение по умолчанию:
Второй пример на этом демо включает объявление overflow-wrap: break-word; , приказывающее браузеру разбить слово перед возможным переполнением своего контейнера.
word-break
Насколько я поняла, свойство word-break нужно только для того, чтобы как-то по-особому форматировать текст на китайском, японском и корейском языках.
Я применяла word-break для разбивки длинных слов, но правильным свойством (если вы не работаете с дальневосточным текстом) будет более общее вышеупомянутое overflow-wrap .
hyphens
Свойство hyphens рассказывает браузеру, как расставлять дефис при переносе, и допускает следующие значения: none , manual и auto , которые в настоящий момент плохо поддерживаются браузерами , поэтому вам, видимо, придётся запустить FireFox.
Значение none гарантирует, что в слова никогда не будет подставляться символ переноса.
При значении manual дефис выставляется в месте переноса только при наличии указывающего на это символа. Указать это можно, вставив символ либо жёсткого , либо мягкого переноса в нужное место в разметке.
Жёсткий перенос (-) прикажет слову разорваться в определённом месте при необходимости, но всё в любом случае будет отображаться на экране.
Мягкий перенос (-) делает тоже самое, но фактически не отображает дефис на экране, что, как правило, предпочтительнее.
При значении auto слова можно разбивать либо в явно указанных местах, либо автоматически, в соответствии с правилами расстановки переносов для конкретного языка, указанными в специальных файлах (если они предусмотрены в браузере). Расстановка переносов специфична для языка, и для документа нужно определять атрибут lang .
white-space
У каждого из нас есть любимые CSS-свойства, на которые можно положиться, словно на запасной выход с надписью «При аварии разбить стекло молотком», чтобы выбраться из запутанной ситуации; см. также overflow: hidden и display: none . Для меня таким свойством является white-space .
Это свойство указывает правила обработки пробельных символов (пробелы, табы, переводы строки) в элементе. Что порой может вдруг оказаться невероятно полезным, например, при отладке, или чтобы лучше контролировать содержимое ячеек таблицы.
У этого свойства бывает пять значений: normal (по умолчанию), nowrap , pre , pre-wrap и pre-line .
Взглянуть на эти свойства в действии можно в примере ниже: учитывайте добавочные пробельные символы в разметке.
По умолчанию пробельные символы схлопываются в один пробел и строки разбиваются, чтобы уместиться в контейнер; как видно в первом демо-примере, в тексте есть лишние пробелы, но они не отображаются.
nowrap (пример 2) также игнорирует дополнительные пробелы, но зато не разбивает строку текста на границах контейнера.
pre учитывает все пробельные символы в разметке, и не разбивает строки (как видно выше в примере 3).
pre-wrap (пример 4) учитывает добавочные пробелы, но заставляет строку разбиваться.
pre-line (последний пятый пример) схлопывает пробельные символы (кроме перевода строки) и принуждает «цепочку» текста умещаться в контейнер.
На CSS — Tricks есть удобная табличка , которая поможет всё это резюмировать.
Строки кода в блоке
Строки кода в теге pre по умолчанию не переносятся. Это может вызвать неприятности в статьях блога и технических электронных книгах на мобильном, например.
По моему опыту, обычно решение зависит от того, на каком языке этот код, и вообще от задачи, но эти проблемы можно обойти при помощи принудительных переносов (без дефиса!) или горизонтального скроллинга. Методом проб и ошибок можно понять, какое точное сочетание свойств нужно тому или иному браузеру. Убедитесь, что значение white-space случайно не переопределилось на одно из тех, при которых пробелы схлопываются, потому что это может оказаться значимым для синтаксиса кода.
Также я нарвалась на проблемы с адаптивностью при оформлении кода для github (gist), который особенно коварен из-за того, что это table. В таких случаях я понимаю, что мне придётся применить особенное оформление для переопределения контейнера таблицы.
Многоточие со смыслом
Как по мне, CSS-объявление text-overflow: ellipsis; - какая-то шляпа. Оно очень капризное и работает только при сочетании с группой других свойств. К тому же оно применяется только к единственной строке текста, что делает его не особо полезным.
С jQuery-плагином dotdotdot можно расставить многоточие в нескольких строках текста и даже добавить в конце ссылку для продолжения чтения.
Вот быстрый примерчик:
Перенос только в строго определенном месте
Порой необходимо, чтобы слова разрывались только в строго определённых местах, где в этом есть смысл, что добавляет ещё один уровень сложности; как же сообщить эти точки разрыва браузеру?
Сделать это можно с помощью мягкого или жёсткого переносов, которые, как обсуждалось ранее, размещаются в определённом месте разметки.
Не сомневайтесь, что если мягкий дефис поддерживается в браузере, то при необходимости строка будет разрываться в тех местах, где установлен - .
Эй, чем ты занимался на вы-ходных? Я рисовал по керамике, это выглядело натурально.
Слишком длинные ссылки
Я постоянно сталкивалась с проблемой слишком длинных ссылок, снова, при подготовке электронной книги (да, при публикации электронной книги это буквально худшее) с множеством целых ссылок в сносках.
По умолчанию такие ссылки не разрываются и вызывают всяческие неприятности на небольших экранах. При необходимости URL’ы должны разрываться без дефиса, поскольку ссылка в таком случае будет нерабочей. Также здесь нужно быть осторожным, поскольку, если вы такое допустите, то разорвутся не только URL’ы, но и все слова.
Заключение (Ха!)
Бывает непросто выстроить точно необходимое сочетание этих свойств, чтобы справиться с внезапно возникшей исключительной ситуацией, но более глубокое знание возможных вариантов и умение быстро распознавать типичные примеры определенно помогут обойтись без лишнего гадания.
Всем привет и приступим. Допустим у нас есть следующий текст:
Правительство Объединенных Арабских Эмиратов и администрация концентрируют в этом городе все самые новые технологии, основанные на последних достижениях науки и техники, пытаясь превратить его город будущего, словно сошедший с экрана какого-нибудь научно-фантастического фильма. К этим технологиям можно отнести роботов-полицейских, автомобили-роботы и транспортную систему Hyperloop, а в недалеком будущем в Дубайе начнет функционировать служба автоматических летающих такси. И в рамках подготовки к этому событию электрический двухместный летательный аппарат Volocopter с 18 роторами, который и будет использоваться в качестве такси, совершил первый полет в автоматическом режиме, пишут...
здесь у нас указан некий текст с которым мы сейчас начнем работать.
И первое свойство которое мы с вами рассмотрим называется word-break
word-break: normal | keep-all | break-all
Нас в основном интересуют два значения данного свойства normal - дефолтное значение и break-all с помощью которого мы устанавливаем что перенос слов осуществляется посимвольно. Что касается keep-all, то данное значение служит для переноса слов на китайском, японском и корейском языках.
P{ word-break: break-all;. }
заметьте, что после применения данного стиля весь наш текст растягивается в полную доступную ширину и переносы осуществляются не по словам, а по символам. Это свойство может быть полезно когда у нас есть очень длинное слово которое не влезает в заданную ширину. Однако это создает своего рода неудобства, так как посимвольно переносятся абсолютно все слова даже те которые влезают в заданную ширину.
К счастью есть аналогичное свойство которое переносит только не влезающие слова по символам. Называется оно overflow-wrap:
P{ overflow-wrap: break-word; }
и после применения значения break-word, весь наш текст переносится по словам, а слова которые не влезают в заданную ширину переносятся посимвольно. Можно сказать задача выполнена! Помимо значения break-word данное свойство принимает:
overflow-wrap: normal | break-word | inherit;
Теперь давайте перейдем к более продвинутому свойству css для переноса слов в тексте.
Рассмотрим свойство white-space c помощью которого мы можем имитировать работу тега pre не меняя сам текст на моноширный.
white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit
По сути с помощью данного свойства мы работает только с пробелами в тексте. К примеру если мы применим следующий стиль к нашему тексту:
White-space: nowrap;
все переносы строк у нас будут проигнорированы и наш текст отобразиться в виде одной строки.
White-space: pre;
В случае значения pre все переносы строк будут аналогичны переносам в исходном коде. Причем если текст не будет помещаться в заданную ширину, то он переносится не будет. Если мы хотим чтобы он переносился, то нам нужно указать значение pre-line.
Если же мы хотим чтобы у нас учитывались не только переносы строк исходного кода, но и пробелы между словами, тогда нужно указать:
White-space: pre-wrap;
Вот в принципе и все что я хотел вам рассказать про переносы слов средствами css. Надеюсь данная статья была для вас полезна и вы не раз еще воспользуетесь полученными знаниями.
Ну а я же с вами прощаюсь. Желаю успехов и удачи! Пока!
Часто требуется внутри одной ячейки 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 и CSS ручных или автоматических способов добавления переносов не так уж и много, так что перечислю все.
Использование тега
Тег
Пример 1. Тег
Один
Результат данного примера показан на рис. 1.
Рис. 1. Текст с переносами слов
Мягкий перенос
Применение
Пример 2. Мягкий перенос
Один-надцатиклас-сница Анжелика после окончания школы выбрала профессию дело-произ-водитель-ницы.
Результат данного примера показан на рис. 2. Заметьте, насколько эстетичнее и понятнее стал выглядеть текст в сравнении с рис. 1.
Рис. 2. Текст с переносами слов
Свойство word-break
Чтобы автоматизировать процесс создания переносов воспользуйтесь свойством word-break со значением break-all (пример 3). Добавлять какие-либо символы или теги в HTML уже не придётся, всё берут на себя стили.
Пример 3. Применение word-break
Одиннадцатиклассница Анжелика после окончания школы выбрала профессию делопроизводительницы.
Результат данного примера показан на рис. 3. Правила переносов текста в этом случае не учитываются, поэтому слова могут переноситься весьма причудливым образом.
Рис. 3. Текст с переносами слов
Из всех перечисленных способов «полуручной» с использованием - даёт наилучший результат - соблюдаются правила русского языка, текст выглядит наиболее эстетично. Пользуйтесь им, когда в тексте встречаются длинные слова.
Свойство hyphens
И, наконец, самое мощное и удобное свойство для автоматического добавления переносов - hyphens . Его действие основано на встроенном в браузере словаре переносов, поэтому даёт наилучший результат. Поддерживается в IE10, Firefox, Android и iOS. Chrome и Opera не поддерживают. Чтобы это всё работало, для тега добавляем атрибут lang со значением ru (пример 4).
Пример 4. Использование hyphens
Одиннадцатиклассница Анжелика после окончания школы выбрала профессию делопроизводительницы.
Результат данного примера показан на рис. 4.
Рис. 4. Текст с переносами слов
Запрет переносов
Нередко возникает и обратная задача - запретить переносы в тех местах, где они по правилам языка недопустимы. Например, нельзя отрывать единицы измерения от числа (10 мл), обозначение года (54 до н. э.), инициалы от фамилии, разрывать устойчивые сокращения (т. д.) и др. Чтобы браузер не добавлял переносы в месте пробела, его следует заменить на неразрывный пробел (пример 5).
Пример 5. Использование
Озеро по координатам 70° 58′ 19″ с. ш. 97° 24′ 5″ в. д. расположено в Таймырском Долгано-Ненецком районе Красноярского края России.
В данном примере для корректного написания координат используется , который не позволяет переносить текст.
