Как сделать чтобы текст переносился на следующую строку css
Перейти к содержимому

Как сделать чтобы текст переносился на следующую строку css

  • автор:

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

Использовать что-то другое кроме ul, li не получится. Это кастомизация CMS. Нужно какие-то свойства задать, чтобы элементы переносились на новую строку, когда достигают границы окна, но какие именно? Уже многое перепробовал.
CodePen:

Исходный код

ul < display: flex; >li
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Вопрос задан более трёх лет назад
  • 2857 просмотров

Перенос текста в ячейке

Microsoft Excel обеспечивает перенос текста в ячейке для его отображения на нескольких строках. Ячейку можно настроить для автоматического переноса текста или ввести разрыв строки вручную.

Автоматический перенос текста

  1. Выделите на листе ячейки, которые требуется отформатировать.
  2. На вкладке Главная в группе Выравнивание выберите пункт Переносить текст. (В Классической версии Excel можно также выделить ячейку, а затем нажать клавиши ALT+H+W.)

Кнопка

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

Настройка высоты строки для отображения всего текста

  1. Выделите ячейки, для которых требуется выровнять высоту строк.
  2. На вкладке Главная в группе Ячейки нажмите кнопку Формат.
  3. В группе Размер ячейки выполните одно из следующих действий:
  4. Чтобы автоматически выравнивать высоту строк, выберите команду Автоподбор высоты строки.
  5. Чтобы задать высоту строк, выберите команду Высота строки и введите нужное значение в поле Высота строки.

Совет: Кроме того, можно перетащить нижнюю границу строки в соответствии с высотой текста в строке.

Ввод разрыва строки

Новую строку текста можно начать в любом месте ячейки.

    Дважды щелкните ячейку, в которую требуется ввести разрыв строки.

Совет: Можно также выделить ячейку и нажать клавишу F2.

Дополнительные сведения

Вы всегда можете задать вопрос эксперту в Excel Tech Community или получить поддержку в сообществах.

Блог Тани Соколовской

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

Оформление текста. Шпаргалка для всех, кто пишет

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

Абзац

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

Перенос слов

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

Тире, в отличие от предлогов, не переносится:

Всё лучшее —
детям.

Неправильно:

Всё лучшее
— детям.

HTML:   Mac: ⌥ Opt+Пробел MS Word: Ctrl+⇧ Shift+Пробел

Если не можете использовать неразрывный пробел, используйте неразрывный диапазон norb:

123–45–67 кто-то

Тире, дефис и минус

Есть четыре наиболее распространенных знака в виде горизонтальной линии: Тире (—)

HTML: — Mac: ⌥ Opt+⇧ Shift+- MS Word: Ctrl+Alt+Num - Windows: Alt+0151

Короткое тире (–)

HTML: – Mac: ⌥ Opt+- MS Word: Ctrl+Num - Windows: Alt+0150
HTML: ‐ Есть на клавиатуре.
HTML: −

Отличаются они длиной и областью применения.

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

Тире, короткое тире, дефис, минус, плюс

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

— Как чудесно! — сказала я.
Москва — Санкт-Петербург, весна — лето.
Море — кайф.

В английском языке есть короткое тире (–), его используют в диапазонах чисел: 2015–2017. В русском языке можно отойти от правил и также использовать короткое тире в диапазоне чисел, потому что обычное тире кажется длинноватым: 2015—2017.

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

Недопустимо использовать тире вместо дефиса, и наоборот.

Минус используется только в математических выражениях: 10−2=8. Грубая ошибка — использовать минус вместо тире или дефиса.

Многоточие

Многоточие указывает на пропуск в тексте, незаконченную мысль или интервал значений. В иврите, русском и английском языке многоточие обозначается тремя точками … Иногда многоточие используют одновременно с вопросительным или восклицательным знаком, тогда ставится знак и две точки: . или .

Неправильно писать две точки .. или более трех точек …. — это признак неграмотности.

Кавычки

В русском языке применяются кавычки-ёлочки « », а в цитате второго уровня — и ёлочки, и кавычки-лапки „ “.

В английском: ’такие «кавычки» в Англии’, а «такие ’кавычки’ в Америке».

Цитаты

Цитаты набирают обычным шрифтом в кавычках. Чтобы привлечь больше внимания, цитату можно оформить декоративной кавычкой. Такая кавычка может быть и ёлочкой и лапкой:

БУКВЫ

Прописными буквами можно набирать заголовки (как над этим абзацем) или короткие вставки-цитаты, но ни в коем случае не основной текст. Они «кричат» и привлекают внимание. Прописные буквы требуют разрядки, то есть нужно увеличивать межбуквенные пробелы.

Прописные без разрядки слипаются и затрудняют чтение

Строчные буквы разряжать нельзя:

Справа разреженный текст

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

Курсив можно использовать вместо кавычек, если в тексте нужно указать какое-то название (книги или произведения искусства) или слово на иностранном языке:
Картину «Постоянство памяти» Сальвадор Дали написал в 1931 г.
или
Картину Постоянство памяти Сальвадор Дали написал в 1931 г.

Жирное начертание нужно, чтобы привлечь внимание. Им можно набирать заголовки.

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

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

Списки

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

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

Арабскими цифрами с точкой обозначается список, если каждый элемент списка является законченным предложением:

Вкусная яичница в три шага:

  1. Положите кусочек сливочного масла в сковороду и поставьте её на большой огонь.
  2. Когда масло растает, вбейте яйцо и убавьте огонь на среднюю температуру.
  3. Дождитесь, когда белок полностью приготовится.

Кроме арабских цифр можно использовать римские цифры и прописные буквы.

Арабскими цифрами или русскими буквами со скобкой, если список является одним предложением, а его элементы — однородные члены. В конце каждого пункта ставится запятая или точка с запятой, в конце последнего пункта ставится точка.

Во внутренней области нашей Солнечной системы четыре планеты:
1) Меркурий,
2) Венера,
3) Земля,
4) Марс.

Выходя из дома не забудьте:
а) выключить все электроприборы;
б) взять с собой телефон и наушники;
в) закрыть дверь и забрать ключи из замка.

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

Компания Apple производит и продает:
— ноутбуки,
— телефоны,
— настольные компьютеры,
— планшеты,
— часы.

Можно вовсе отказаться от маркера и использовать только втяжку внутрь. Так список выглядит спокойнее и чище.

Компания Apple производит и продает:

  • ноутбуки,
  • телефоны,
  • настольные компьютеры,
  • планшеты,
  • часы.

Допускается использование и других символов (• ‣ ⁃ ∙ ◦), но не желательно — они отвлекают внимание от текста и засоряют его. Черный кружок (•) — маркер в английском языке.

Числа

В тексте числа можно писать прописью или в цифровой форме.

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

Также прописью следует писать простые числа: Я купила три мандарина.

Цифровой формой следует писать сложные числа и числа при единицах величин или денежных единицах: Ёлка стоила 10 345 рублей, но нам сделали скидку 50 %.

Следует разделять числа на тысячные пробелом: 12 000.

Числа с разрядом в русском языке отделяются запятой: 1,25. В английском языке точкой: 1.25.

Дробные числа следует набирать на верхнюю и нижнюю линию шрифта: ½ площади, а не 1/2 площади, при этом не нужно писать слова часть или доля.

Интервал значений следует обозначать тире (—), коротким тире (—), троеточием (…), заком плюс-минус (±), предлогами от и до.

Тире в числах прописью: десять — пятнадцать метров.

Короткое тире в цифровой форме чисел: 2000—2017 года.

Троеточие при отрицательных значениях: температура −15… −20 °C.

Плюс-минус при допускаемых отклонениях: 20±3 штуки.

От и до для записи интервалов между числовыми значениями: от 30 до 70 литров.

Когда два числа прописью стоят в значение то ли то, то ли другое, между ними ставится дефис: За завтраком я съела две-три конфеты.

Номера телефонов

В номерах телефонов используются дефис и пробел.

Городские номера:
123-45-67
12-34-56
1-23-45
12-34

Номера с кодом города:
(123) 123-45-67
(12-34) 12-34-56
(123-45) 1-23-45
(12-34-56) 12-34

Номера мобильных телефонов:
8 123 123-45-67
+7 123 123-45-67

Российские номера телефонов за рубежом:
+7 123 123-45-67
+7 12-34 12-34-56
+7 123-45 1-23-45
+7 12-34-56 12-34
либо
(+7 123) 123-45-67
(+7 12-34) 12-34-56
(+7 123-45) 1-23-45
(+7 12-34-56) 12-34

Если номер телефона с удачным сочетанием цифр, то допускается их объединение в группы для более легкого запоминания: 222-3-222 или 222 3 222, 44-44-555 или 44 44 555.

Дата и время

Формы записи даты:
5 января 2017 года
5 янв. 2017 г.
05.01.2017 г.
05.01.17 г.
Израиль, 5 янв. 2017 г.
2016/17 учебный год
В 2010—2017 гг. (неправильно: 2010—17 гг., но верно с десятилетиями: 1970—80-е гг., либо 70—80-е гг.)
В датах в круглых скобках слово год опускается: (1933—1997), (1987)

Время:
В обозначении времени дня: Сейчас 11 часов 3 минуты 30 секунд.
В обозначении числа единиц времени: Прошло 6 ч 30 мин 45 с.
В цифровом виде между числами следует ставить двоеточие: 11:03:30 или 11:03. В английском языке можно ставить точку: 11.03.

Знаки в тексте

Неправильно:
(С) 2017 Tanya Sokolovskaya(R)

Правильно:
© 2017 Tanya Sokolovskaya®

Ссылки в тексте

Ссылки в тексте рекомендуется выделить цветом и подчеркнуть, либо просто подчекнуть, если цвет неуместен.

Денежные единицы

В русском языке знаки отделяются пробелом:
100 ₽
100 $
100 €
Разделитель классов — пробел или уменьшенный пробел: 3 000 ₽ (три тысячи рублей)
Разделитель десятичной дроби — запятая: 3,14 ₽ (три рубля четырнадцать копеек)
EUR, USD, руб. и р. пишутся после числа через пробел: 3 000 руб.

В английском языке знаки не отделяются пробелом:
₽100
$100
€100
Разделитель классов — запятая: $3,000 (три тысячи долларов)
Разделитель десятичной дроби — точка: $3.14 (три доллара четырнадцать центов)
EUR, USD, RUB пишутся перед числом через пробел: USD 3,000

Адрес

В цивилизованном мире принято писать адрес от меньшего к большему: 9-я Парковая ул., д. 19, кв. 10, г. Москва.

Если необходимо разделить адрес на строки, то следует делать так:
ул. Тверская, д. 13, кв. 15
г. Москва

Почта России говорит, что оформлять адрес следует в следующем порядке, где каждый пункт — это новая строка:

  • Полное имя получателя (в формате «Фамилия Имя Отчество») или название организации (краткое или полное)
  • Название улицы, номер дома, номер квартиры
  • Название населенного пункта
  • Название района, области, края или республики
  • Название страны
  • Номер а/я, если есть (в формате «а/я 15»)
  • Почтовый индекс

Я считаю, в написании адреса следует ориентироваться на задачу.
Если вы заказываете курьера внутри города, тогда достаточно указать улицу, номер дома, номер квартиры или офиса. Индекс тут не нужен, так как он не несет никакой смысловой нагрузки для человека. Город и страна и так очевидны.
Если адрес указан на афише какого-то городского события, то можно написать только улицу и номер дома. Это работает если, например, в заголовке обозначен город «Картины Микеланджело в Екатеринбурге».
Если вы отправляете посылку в другую страну, то нужно указывать полный адрес — прямо по пунктам Почты России.
Если вы заказали доставку из соседнего города, логично, что в адресе нужно указать ваш город.

Основные рекомендации по написанию адреса:
Номера домов следует писать без знака номера (№):

Двойной номер дома следует писать через косую черту:

Литерные номера принято писать слитно с последней цифрой номера:

  • Пушкинский пер., д. 27а.

Следующие за цифрой слова пишутся с большой буквы, кроме лет и года:

  • ул. 1905 года, площадь 40 лет Октября.

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

  • Правильно: ул. Тверская, шоссе Энтузиастов.
  • Неправильно: Ул. Тверская, Шоссе Энтузиастов.

Источники

«Справочник издателя и автора», Мильчин и Чельцова
«Облик книги» и «Образцы шрифтов», Чихольд
«Синтаксис современного русского языка», Валгина

flex-wrap

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020 .

Свойство CSS flex-wrap задаёт правила вывода flex-элементов — в одну строку или в несколько, с переносом блоков. Если перенос разрешён, то возможно задать направление, в котором выводятся блоки.

Интерактивный пример

Начальное значение nowrap
Применяется к flex-контейнеры
Наследуется нет
Обработка значения как указано
Animation type discrete

Подробнее о свойствах и дополнительную информацию смотрите Основные понятия Flexbox.

Синтаксис

flex-wrap: nowrap; /* Default value */ flex-wrap: wrap; flex-wrap: wrap-reverse; /* Глобальные значения */ flex-wrap: inherit; flex-wrap: initial; flex-wrap: revert; flex-wrap: revert-layer; flex-wrap: unset; 

Свойство flex-wrap может содержать одно из следующих ниже значений.

Значения

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

Расположение в одну линию, может привести к переполнению контейнера. Свойство cross-start эквивалентно start или before в зависимости от значения flex-direction .

Расположение в несколько линий. Свойство cross-start эквивалентно start или before в зависимости от значения flex-direction и свойство cross-end противоположно cross-start.

Ведёт себя так же, как и wrap , но cross-start и cross-end инвертированы.

Формальный синтаксис

flex-wrap =
nowrap | (en-US)
wrap | (en-US)
wrap-reverse

Примеры

HTML

h4>This is an example for flex-wrap:wraph4> div class="content"> div class="red">1div> div class="green">2div> div class="blue">3div> div> h4>This is an example for flex-wrap:nowraph4> div class="content1"> div class="red">1div> div class="green">2div> div class="blue">3div> div> h4>This is an example for flex-wrap:wrap-reverseh4> div class="content2"> div class="red">1div> div class="green">2div> div class="blue">3div> div> 

CSS

/* Common Styles */ .content, .content1, .content2  color: #fff; font: 100 24px/100px sans-serif; height: 150px; text-align: center; > .content div, .content1 div, .content2 div  height: 50%; width: 50%; > .red  background: orangered; > .green  background: yellowgreen; > .blue  background: steelblue; > /* Flexbox Styles */ .content  display: flex; flex-wrap: wrap; > .content1  display: flex; flex-wrap: nowrap; > .content2  display: flex; flex-wrap: wrap-reverse; > 

Результат

Спецификации

Specification
CSS Flexible Box Layout Module Level 1
# flex-wrap-property

Добавить комментарий

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