Текст в одну строку css: html — Расположение текста в одну линию

Содержание

Перенос текста (свойство white-space) | CSS примеры

Перенести ли текст автоматически или показать в одну строку, отобразить рядомстоящие пробелы как один или каждый в отдельности определяет white-space.

white-space
normal
текст переносится | пробелы не учитываются | Enter (разрыв строки) не учитывается
pre-line
текст переносится | пробелы не учитываются | Enter учитывается
pre-wrap
текст переносится | пробелы учитываются | Enter учитывается
pre
текст не переносится | пробелы учитываются | Enter учитывается
nowrap
текст не переносится | пробелы не учитываются | Enter не учитывается
initial
normal
inherit
наследует значение родителя
unset
наследует значение родителя

ноль один два три Enter пять шесть семь восемь девять десять одиннадцать двенадцать тринадцать четырнадцать

<style>
div {
  white-space: normal; 
  border: 1px solid red;
}
</style>

<div>ноль один  два   три    <kbd>Enter</kbd>
     пять      шесть       семь        восемь         девять          десять           одиннадцать            двенадцать             тринадцать              четырнадцать</div>

У тега <pre> по умолчанию white-space имеет значение pre.

Значения, отличные от normal, часто применяются

  • в комментариях, которые заполняют посетители, далёкие от HTML. Абзацы разбиваются не тегом
    <p>
    , а перевод строки обозначается не тегом <br>, а символом &#10;, который печатает клавиша Enter.
  • для демонстрации HTML кода.
  • для оформления стихов.

Запретить перенос

Значения pre-wrap и pre-line поддерживаются Internet Explorer 8

Запрет переноса с помощью

white-space: nowrap;
<style>
.nowrap {
  white-space: nowrap;
}
</style>

Значения <span>pre-wrap</span> и <span>pre-line</span> поддерживаются <span>Internet Explorer 8</span>

Запрет переноса с помощью неразрывного пробела

&nbsp; и/или неразрывного дефиса &#8209;

В данном примере они более подходят, так как занимают меньше места. К тому же при использовании overflow-wrap: break-word; или word-wrap: break-word;

или word-break: break-all; символы всё же в определённый момент переходят на следующую строчку.

Значения pre&#8209;wrap и pre&#8209;line поддерживаются Internet&nbsp;Explorer&nbsp;8

Прокрутка при отключении автопереноса

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

<style>
div {
  width: 50%;
  border: 1px solid red;
  white-space: nowrap;
}
div:nth-child(2) {
  overflow: hidden;
}
div:nth-child(3) {
  overflow-x: scroll;
}
div:nth-child(4) {
  overflow: auto;
}
</style>

overflow: visible;
<div>Значения pre-wrap и pre-line поддерживаются IE 8</div>
overflow: hidden;
<div>Значения pre-wrap и pre-line поддерживаются IE 8</div>
overflow-x: scroll;
<div>Значения pre-wrap и pre-line поддерживаются IE 8</div>
overflow: auto;
<div>Значения pre-wrap и pre-line поддерживаются IE 8</div>

Разрыв строки

Тег

<br>

Элементы после тега <br> будут перенесены на следующую строку с любым значением свойства white‑space.

ноль один <br>
три Enter пять шесть

<style>
div {
  white-space: nowrap;
  border: 1px solid red;
}
</style>

<div>ноль один  <code>&lt;br&gt;</code><br>   три    <kbd>Enter</kbd>
     пять      шесть</div>

Блочный элемент

Всё содержимое блочного элемента будет перенесено на отдельную строку с любым значением свойства white‑space.

ноль один

<div></div>

три Enter пять шесть

<style>
#raz {
  white-space: nowrap;
  border: 1px solid red;
}
</style>

<div>ноль один  <div><code>&lt;div&gt;&lt;/div&gt;</code></div>   три    <kbd>Enter</kbd>
     пять      шесть</div>

Свойство

white-space
<style>
h2 {
  white-space: pre-line;
}
span {
  padding: 0 .
5em; background: black; color: #fff; } </style> <h2>Это должно быть сверху <span>это под ним</span></h2>

Разрыв строки в псевдоэлементах

::before/::after
<style>
div::after {
  content: "\A Номер: 1 \A Год: 2017"; 
  white-space: pre;
}
</style>

<div>Текст</div>

У моноширинного шрифта все символы одной ширины, в том числе пробел

¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶ ¶¶¶¶¶¶ ¶¶¶¶ ¶¶¶¶¶¶¶¶¶¶¶¶ ¶¶ ¶¶¶ ¶¶¶¶¶¶¶ ¶¶ ¶¶ ¶¶¶¶¶¶¶¶ ¶¶ ¶¶¶¶ ¶ ¶¶ ¶¶ ¶0 ¶ ¶¶ ¶¶¶¶¶¶¶ ¶¶ ¶ ¶¶¶¶ ¶¶ ¶¶ ¶¶ ¶ ¶¶¶¶¶¶¶¶¶¶¶ ¶ ¶ ¶¶ ¶¶ ¶¶¶¶¶¶¶¶¶¶ ¶¶ ¶ ¶ ¶¶ ¶ ¶¶ ¶¶¶¶¶¶¶ ¶ ¶¶ ¶ ¶ ¶¶¶ ¶ ¶ ¶ ¶¶¶¶¶ ¶ ¶¶¶¶ ¶¶ ¶¶ ¶ ¶¶¶¶¶¶ ¶ ¶ ¶¶¶¶¶¶ ¶ ¶¶¶¶¶ ¶ ¶ ¶ ¶¶¶¶¶ ¶¶ ¶¶¶ ¶¶ ¶ ¶¶¶¶ ¶¶¶¶¶ ¶¶ ¶ ¶ ¶¶ ¶¶¶ ¶¶¶¶ ¶ ¶¶¶¶ ¶ ¶¶ ¶¶¶ ¶ ¶¶¶¶¶ ¶ ¶¶¶¶ ¶¶ ¶ ¶¶¶ ¶¶ ¶¶¶¶¶ ¶¶ ¶¶¶¶ ¶¶ ¶¶¶¶ ¶¶ ¶ ¶ ¶ ¶ ¶ ¶¶ ¶¶ ¶¶¶¶¶¶ ¶¶¶¶ ¶¶ ¶¶¶¶ ¶¶ ¶¶¶ ¶¶ ¶ ¶¶¶ ¶¶ ¶¶ ¶¶ ¶¶¶¶ ¶¶ ¶¶ ¶ ¶ ¶ ¶¶

<style>
div {
  white-space: pre;
  overflow: auto;
  font-family: monospace;
  line-height: normal;
}
</style>

<div>Дельфин из символов</div>

Картинка и текст в одну строку.

— Вопрос от Александр Пушной
  • Вопросы
  • Горячие
  • Пользователи
  • Вход/Регистрация

>

Категории вопросов

Задать вопрос +

Основное

  • Вопросы новичков (16348)
  • Платные услуги (2088)
  • Вопросы по uKit (81)

Контент-модули

  • Интернет-магазин (1430)
  • Редактор страниц (236)
  • Новости сайта (497)
  • Каталоги (805)
  • Блог (дневник) (111)
  • Объявления (294)
  • Фотоальбомы (432)
  • Видео (255)
  • Тесты (60)
  • Форум (575)

Продвижение сайта

  • Монетизация сайта (218)
  • Раскрутка сайта (2446)

Управление сайтом

  • Работа с аккаунтом (5290)
  • Поиск по сайту (425)
  • Меню сайта (1755)
  • Домен для сайта (1526)
  • Дизайн сайта (13441)
  • Безопасность сайта (1463)
  • Доп. функции (1304)

Доп. модули

  • SEO-модуль (225)
  • Опросы (62)
  • Гостевая книга (98)
  • Пользователи (431)
  • Почтовые формы (317)
  • Статистика сайта (196)
  • Соц. постинг (212)
  • Мини-чат (91)

Вебмастеру

  • JavaScript и пр. (642)
  • PHP и API на uCoz (233)
  • SMS сервисы (10)
  • Вопросы по Narod. ru (422)
  • Софт для вебмастера (39)

Перенос текста и изменение высоты строки в представлении проекта в классической версии Project

Project

Формат и печать

Формат и печать

Перенос текста и изменение высоты строки в представлении проекта в классической версии Project

Project Online Desktop Client Microsoft® Project профессиональный 2021 Microsoft Project стандартный 2021 Project профессиональный 2019 Project стандартный 2019 Project профессиональный 2016 Project стандартный 2016 Project профессиональный 2013 Project стандартный 2013 Project 2010 Project стандартный 2010 Еще. ..Меньше

Project автоматически переносит текст в столбце «Название задачи», но вы также можете включить перенос текста и в других столбцах. Таким способом можно изменить высоту строк в проекте.

  1. Выберите любое представление с таблицей (кроме представления «Визуальный оптимизатор ресурсов»).

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

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

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

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

Настройка высоты столбца для переноса текста

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

  1. В любом представлении листа перетаскивайте нижний край заголовка строки (крайней левой ячейки) вниз, пока текст не будет перенесен на следующую строку.

    Совет: Одновременно можно изменить высоту нескольких строк. Просто выделите строки и перетащите нижнюю границу заголовка последней строки из них до нужной высоты.

  2. Чтобы отменить перенос текста, перетаскивайте нижний край заголовка строки, пока текст не будет снова перенесен на одну строку.

 Настройка одинаковой высоты всех строк

Ниже вы можете быстро настроить одинаковое высоту всех строк. Это можно сделать, если вы больше не хотите, чтобы текст был сдвенут в несколько строк.

  1. Щелкните правой кнопкой мыши за колонок столбца, для чего текст больше не нужно использовать, и выберите «Перенос текста».

  2. Выберите поле в левом верхнем углу представления, чтобы выбрать все представление.

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

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

  • Узнайте больше о работе с текстом в Project.

  • Если текст в столбцах проекта печатается без переносов, попробуйте скачать исправление.

Свойство text-overflow — добавление троеточия в конец обрезанного текста

Свойство text-overflow добавляет троеточие в конец обрезанного текста в знак того, что текст не помещался в блок и был обрезан.

Для работы свойства текст должен быть обрезан через свойство overflow или свойство overflow-x в значении hidden, auto или scroll. Если задано visible (а так и есть по умолчанию) — text-overflow работать не будет.

Синтаксис

селектор { text-overflow: ellipsis | clip; }

Значения

Значение Описание
ellipsis Добавляет в конец обрезанного текста троеточие.
clip Не добавляет троеточие в конец (это значение по умолчанию, нужно для отмены действия свойства при необходимости).

Значение по умолчанию: clip.

Пример . Вылезающий текст

В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы. Обрезания не происходит:

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur ещеоднооченьдлинноооооооооооооооооооооооооеслово adipiscing elit. </div>#elem { width: 200px; overflow: visible; border: 1px solid red; }

:

Пример . Добавим свойство overflow

Сейчас все, что вылезло за границы контейнера, просто обрежется:

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur ещеоднооченьдлинноооооооооооооооооооооооооеслово adipiscing elit. </div>#elem { width: 200px; overflow: hidden; border: 1px solid red; }

:

Пример . Значение ellipsis

Сейчас в дополнение к свойству overflow добавим еще и text-overflow в значении ellipsis. Обрезанному тексту добавится троеточие в конец:

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur ещеоднооченьдлинноооооооооооооооооооооооооеслово adipiscing elit. </div>#elem { width: 200px; overflow: hidden; text-overflow: ellipsis; border: 1px solid red; }

:

Пример . С полосами прокрутки

Если задать overflow: auto и text-overflow: ellipsis, то появится полоса прокрутки, но троеточие по-прежнему будет добавлено. Попробуйте прокрутить полосу прокрутки в примере:

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur ещеоднооченьдлинноооооооооооооооооооооооооеслово adipiscing elit. </div>#elem { width: 200px; overflow: auto; text-overflow: ellipsis; border: 1px solid red; }

:

Пример . Если нет очень длинных слов

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

<div> Lorem ipsum dolor sit amet adipiscing elit. </div>#elem { width: 200px; overflow: hidden; text-overflow: ellipsis; border: 1px solid red; }

:

Пример . Текст в одну строку

Однако, бывают ситуации, когда мы хотим, чтобы текст обрезался, если он слишком длинный (текст вообще, а не отдельные слова) и не переносился на следующую строку. Это делается с помощью добавления свойства white-space в значении nowrap, которое запретит перенос текста на другую строку. Посмотрите на пример, теперь текст обрезается:

<div> Lorem ipsum dolor sit amet adipiscing elit. </div>#elem { width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: 1px solid red; }

:

Пример . Ширина в процентах

Если задать ширину блока в %, то обрезание тоже будет работать корректно:

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur ещеоднооченьдлинноооооооооооооооооооооооооеслово adipiscing elit. </div>#elem { width: 80%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: 1px solid red; }

:

Смотрите также

  • свойства word-break и overflow-wrap,
    которые позволяют перенести буквы длинного слова на новую строку
  • свойство hyphens,
    которое включает переносы слов по слогам
  • свойство overflow,
    которое обрезает вылезающие за границу блока части

Перенос текста с помощью CSS и HTML

Категория: Все статьи, Сайтостроение, Опубликовано: 2016-08-12
Автор:

Приветствую вас, дорогие читатели!

Сегодня расскажу про HTML и CSS перенос текста. Очень часто возникает ситуация, когда какой-то текст или слово не помещается в блоке и нужно перенести его на следующую строку.

Перенос текса на следующую строку

Для переноса текста можно использовать специальный html тег <br />. Это одиночный тег, то есть его не нужно закрывать, и ставится он в том месте, где вам нужно осуществить перенос на следующую строку.

Например:

<div> Здесь ну oчень длинный текст, <br /> который не плохо было бы перенести на новую строку. </div>

<div>

Здесь ну oчень длинный текст, <br /> который не плохо было бы перенести на новую строку.

</div>

Вот что получим:

Здесь ну oчень длинный текст,
который не плохо было бы перенести на новую строку.

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

Как сделать CSS перенос слова на следующую строку?

Осуществить перенос слова можно при помощи CSS свойства word-break.
У данного CSS свойства может быть несколько значений:

  • Normal – значение по умолчанию, то есть перенос слова не осуществляется и если оно не помещается в блок с текстом, то просто вылезет за его пределы.
    Например:

    Выглядит не очень! Не правда ли ?!

  • break-all – переносит часть слова на следующую строку если оно не помещается в блоке с текстом.

    Вот что получится:

    Здесь ну oооооооооооооооочень длинное слово, которое не плохо было бы перенести на новую строку при помощи CSS.

  • inherit – в этом случае наследуется то значение, которое стояла у родительского элемента, то есть у того блока или тега, внутри которого размещён блок с текстом.

Сам HTML кода блока с текстом для переноса в моём случае выглядит вот так:

<div> Здесь ну oооооооооооооооочень длинное слово, которое не плохо было бы перенести на новую строку при помощи CSS. </div>

<div>

Здесь ну oооооооооооооооочень длинное слово, которое не плохо было бы перенести на новую строку при помощи CSS.

</div>

А вот CSS код для переноса текста, который записывается в файл стилей вашего шаблона или страницы сайта:

.perenos { border:3px solid #245488; margin:20px auto; padding:10px; width:170px; word-break:break-all; }

1

2

3

4

5

6

7

8

.perenos {

border:3px solid #245488;

margin:20px auto;

padding:10px;

width:170px;

 

word-break:break-all;

}

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

Перенос слов в тексте вручную

Если текста не очень много и критически важно чтобы всё переносилось по правилам, то перенос слов в тексте можно осуществить при помощи специального символа
&shy;

Этот специальный символ ставится в том месте, где нужно осуществить перенос.
Например:

<div> Здесь ну oоооооо&shy;ооооооооочень длинное слово, которое не плохо было бы перенести на новую строку при помощи CSS. </div>

<div>

Здесь ну oоооооо&shy;ооооооооочень длинное слово, которое не плохо было бы перенести на новую строку при помощи CSS.

</div>

Выглядеть это будет так:

Здесь ну oоооооо­ооооооооочень длинное слово, которое не плохо было бы перенести на новую строку при помощи CSS.

Перенос слов в тексте при помощи свойства hyphens

Данное CSS свойства сравнительно новое и не очень хорошо поддерживается более старыми версиями браузеров. Однако, несмотря на это, оно наилучшим образом осуществляет перенос слов и текста, так как основывается на встроенном словаре браузера и автоматически проставляет знак «-» в конце строки.

СSS код блока с текстом в этом случае выглядит так:

.perenos-hyphens { -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; }

. perenos-hyphens {

    -moz-hyphens: auto;

    -webkit-hyphens: auto;

    -ms-hyphens: auto;

}

Вот результат его использования данного CSS свойства:

Здесь ну очень длинненькое слово, которое не плохо было бы перенести на новую строку при помощи CSS.

Если на вашем сайте данное CSS свойство не срабатывает, то допишите для тега html атрибут lang=”ru”

В коде это будет выглядеть так:

<html lang=»ru»>

<html lang=»ru»>

Как видите перенос текста можно осуществлять несколькими способами как средствами CSS так и HTML.

Надеюсь что данная статья была для вас полезной! Если у вас возникнут какие-то вопросы – пишите их в комментариях. Подписывайтесь на обновления блога и до встречи в следующих статьях!

Равномерное выравнивание блоков по ширине — CSS-LIVE

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

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

Как это работает?

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

Этап первый
Сначала в строке текста ищутся минимальные, неразрывные «кирпичики». Это могут быть отдельные слова в тексте, картинки, инлайн-блоки, инлайн-таблицы и т.д. В общем всё то, что в случае необходимости перенесется на новую строку как единое целое.

Цифрой 1 на картинке отмечены обычные инлайн-боксы, т.е. попросту текст или инлайн элементы, такие, например, как < span> или <em>.
Под цифрой 2 у нас находится элемент строчно-блочного уровня, т.е inline-block. Как можно заменить, алгоритм отступов внутри него рассчитывается заново. Причина в том, что внутри себя inline-block генерирует свой собственный контекст форматирования. Что нельзя сказать об обычном inline элементе, внутри которого межсловное расстояние распределялось бы, по общему, внешнему алгоритму.
Цифрой 3 отмечена обычная картинка. Так же, как и остальные, она является строчным, целым элементом.
Для нашей строки все эти вещи представляют из себя отдельные сущности, неразделимые слова, единые целые. А расстояния между ними как раз и регулируется нашим механизмом, под названием text-align: justify
*Последняя же строка не попадает в поле зрения justify, так как он работает только для целиком заполненных строк, а в последней строке пробелы всегда остаются своего обычного размера.

Этап второй
Вторым этапом алгоритм высчитывает ширины всех наших «кирпичей» в строке, складывает их, а полученный результат отнимает от общей ширины самой строки.

Отсюда можно сделать вывод, что сейчас мы имеем общую сумму всех пробельных зон в строке, которая равна 116px.

Этап третий — завершающий
Третьим и последним этапом алгоритма будет деление полученной цифры (в данном случае 116) на количество пробелов в строке (в нашей строке их 7). Из полученного результата (16.571) вычитается ширина одного пробела и уже это значение добавляется к каждому из них. Что в итоге даёт равномерное распределение отступов во всей строке.

Итог
Как мы можем видеть, алгоритм работы text-align: justify не так уж и сложен на самом деле, всё вроде бы понятно и логично. Я уверен, что каждый из нас, решая подобную задачу, высчитывал бы результат, по точно такому же сценарию. Сложность заключается только в том, чтобы написать хорошее, красивое, а главное качественное решение, затратив при этом минимум материала. Ведь существует много подводных камней, в виде последней (не попадающей под алгоритм) строки, которую нужно прятать, или каким либо образом выравнивать точно так же, как и все остальные. Ну и естественно нельзя забывать об интерпретации кода, таких браузеров, как Opera, IE6-7, которые любят преподносить неожиданные сюрпризы.

Наша задача

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

Вариант 1

Самое первое, что пришло мне на ум, это взять список из пяти пунктов, сделать 4 из них обтекаемыми, а у последнего отменить float и растянуть на всю оставшуюся ширину. Чтобы было понятнее, о чём идёт речь, привожу код.
Структура будет таковой

<ul>
	<li>
		<div></div>
	</li>
	<li>
		<div></div>
	</li>
	<li>
		<div></div>
	</li>
	<li>
		<div></div>
	</li>
	<li>
		<div></div>
	</li>
</ul>

А CSS таким

ul {
	font: 14px Verdana, Geneva, sans-serif;
	overflow: hidden;
}
	ul li {

	}
	ul li. left {
		width: 20%;
		float: left;
	}
	ul li.right {
		width: 20%;
		float: right;
		text-align: right;
	}
	ul li.center {
		text-align: center;
	}
	ul li .content {
		background: #E76D13;
		width: 98px;
		height: 98px;
		display: inline-block;
		text-align: left;
		border: 1px solid #000;

		/* эмуляция inline-block для IE6-7*/
		//display : inline;
		//zoom : 1;
	}

Что мы собственно сделали? А сделали мы следующее. Два левых и два правых пункта мы раскидали по разным сторонам с помощью float : left и float : right соответственно, при этом назначив им по 20% ширины каждому, что в сумме дало 80% от всей ширины контейнера. Последний пункт, я решил не делать обтекаемым, так как его содержимое само по себе занимает всё оставшиеся пространство после float-блоков.
Соответственно для такого решения пришлось пожертвовать разметкой, а точнее дополнительными классами + внутренними контейнерами для контента. Как вы могли заметить, каждый из этих контейнеров я сделал строчно-блочным, повесив на них display : inline-block, благодаря чему мой контент смог выравниваться в любую сторону с помощью text-align у родителя. Эти «жертвы» с большой натяжкой можно было бы отнести к хорошему решению, если бы не некоторые, весомые «но».
Во-первых, как видно из скриншотов, равномерные отступы имеют только боковые пункты, а между средним и остальными есть явная разница. И чем больше ширина контейнера, тем заметнее это становится.
Во-вторых, ради эксперимента, я назначил второму пункту ширину, равную 200px.

И второй элемент сразу же оказался под третьим. Конечно же можно было бы поставить минимальную ширину контейнеру и такого бы не произошло, но разве можно считать это действие отговоркой или решением? Конечно же нет! Я хочу, чтобы наши пункты могли иметь любую ширину и при этом чтобы наш алгоритм идеально работал.
Ну и в-третьих, все эти дополнительные обёртки, классы, рассчитывание кол-ва элементов, их ширины, а так же и ширины контейнера ставят абсолютную точку на этот варианте, заставляя нас идти дальше, в поисках настоящего решения.
Выкладываю этот вариант на всеобщий суд и перехожу к следующему способу.
Вариант с разносторонним выравниванием

Вариант 2

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

<ul>
	<li>
		<div>1</div>
	</li>
	<li>
		<ul>
			<li>
				<div>2</div>
			</li>
			<li>
				<div>3</div>
			</li>
			<li>
				<div>4</div>
			</li>
			<li>
				<div>5</div>
			</li>
		</ul>
	</li>
</ul>
ul {
	font: 14px Verdana, Geneva, sans-serif;
	overflow: hidden;
}
	ul li.one {
		float: left;
	}
	ul li. two {
		overflow : hidden;
		float : none;
	}
	ul li.two li {
		width: 25%;
		text-align: right;
		float: left;

		/* Лекарство для IE6-7*/
		//width: 24.9%;
	}

	ul li .content {
		background: #E76D13;
		width: 98px;
		height: 98px;
		display: inline-block;
		text-align: left;
		border: 1px solid #000;

		/* эмуляция inline-block для IE6-7*/
		//display : inline;
		//zoom : 1;
	}

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

Левая колонка прижата к левому краю и содержит в себе самый первый, одиночный блок. Это нужно для того, чтобы правая часть прижималась вплотную с правой стороны и растягивалась на всё оставшееся место. Растяжка правой части происходит благодаря overflow : hidden, который создаёт свой контекст форматирования, т.е. по сути свой собственный, независимый контейнер. Для всех дочерних элементов этого контейнера его ширина составляет 100% и поэтому блоки внутри него мы растягиваем в соответствии с этим правилом. Четыре блока имеют ширину 25%, что в сумме даёт 100. На изображении можно увидеть, как расположены эти блоки. Видно, что строчно-блочные элементы с контентом внутри них выровнены по правому краю с помощью text-align : right, благодаря чему самый правый блок прижат к своей боковой стенке, так же как и левый.

Благодаря таким «жертвам» с двумя колонками, мы получили отличный результат, и как видно из первых рисунков, при разных разрешениях, расстояние отступов между блоками остаётся абсолютно одинаковым. Это происходит за счёт равнозначных блоков в правой части. Ширина каждого из них составляет 25%, а элемента внутри них — 100px. Что и даёт равные отступы слева от каждого «кирпичика» в отдельности.
На данный момент можно смело заявить, что при фиксированной ширине блоков у нас получилось именно то, что мы хотели.

Но всё же интересно узнать, что будет, если мы поменяем ширину сначала у первого, а потом и у любого блока из правой части. Давайте для начала поставим левому… ну допустим 150px.

ul li.one .content { width: 150px;}

Всё здорово! Пока работает всё та же идея с правым, самостоятельным контейнером. А теперь перенесём нашу ширину на первый блок в правой части.

Эх, а вот этот эксперимент потерпел неудачу. Правый отступ у самого левого блока оказался меньше, чем все остальные. Всё легко объясняется тем, что контент первого элемента в правой части, стал больше на 50px, а так как он выровнен по правой стороне, то ширина визуально прибавилась к его левой части и соответственно стала отличаться от ширины соседних блоков. Ну и естественно поменялся отступ, который стал меньше ровно на 50px.

Из всего этого можно сделать вывод, что данный метод явно лучше, чем его предшественник и то, что он имеет право на жизнь. Единственный его недостаток связан с тем, что мы не может задать разную ширину блокам, и должны придерживаться одинаковой. Так что, если у вас есть список, в котором все пункты имеют равную ширину, то вы вполне можете применять этот подход. Конечно же, нужно понимать, что без двухколоночной структуры тут не обойтись + нужна обязательная минимальная ширина у контейнера (min-width), иначе при маленькой ширине экрана блоки будут наезжать друг на друга.
* Кстати, у себя в примере, в правом контейнере я использовал четыре блока по 25%, и их общая сумма составила 100%. Поэтому нужно помнить, что если блоков будет, ну скажем 6, то ширина каждого из них, будет равна 16.666, что говорит о дробных процентах, которые, например, не поддерживаются в браузере Opera.
Соответственно результат в этом случае будет немного не тем, чем вам хотелось бы.

Вариант с двумя колонками

Вариант 3 — text-align: justify

Стоит отметить, что до этого момента, ни в одном примере, мы ни разу не воспользовались text-align: justify, даже не смотря на то, что именно на основе его алгоритма и строятся все наши решения. Я предлагаю нарушить эту традицию и, наконец, пустить уже в дело этого зверя.

В первой части статьи мы выяснили, что text-align: justify влияет на все строки, кроме последней, а значит нужно построить наш список с учётом этого поведения, добавив в конец меню дополнительный, вспомогательный элемент.

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li></li>
</ul>
ul {
	font: 14px Verdana, Geneva, sans-serif;
	text-align: justify;
}

	ul li  {
		background: #E76D13;
		width: 98px;
		height: 98px;
		display: inline-block;
		text-align: left;
		border: 1px solid #000;

		/* эмуляция inline-block для IE6-7*/
		//display : inline;
		//zoom : 1;
	}
	ul li.helper {
		width: 100%;
		height: 0;
		visibility: hidden;
	}

Из кода ясно, что мы создали список с пятью основными и одним элементом — помощником. text-align: justify на главном элементе-родителе (ul), заставляет своих потомков подчиняться своему алгоритму. Ведь, как известно, это свойство работает с текстом, а так как наши строчно-блочные (display: inline-block) пункты, по сути и являются неразрывными словами в строке, то это поведение вполне закономерно. Кстати, стоит учесть, что text-align: justify наследуемое свойство, поэтому text-align: left на ближайших потомках — необходимая мера. Этим самым мы как бы возвращаем выравнивание содержимого наших блоков в прежнее состояние.
В первой части статьи я упоминал, что наш алгоритм не распространяется на последнюю строку, а работает со всеми строками кроме неё. Поэтому я добавил в конец ещё один элемент, пустышку, и растянул его на 100% по ширине, тем самым заставив его растянуться на самую последнюю строчку в списке. С помощью нехитрых приёмов (height: 0, visibility: hidden) я, можно сказать, почти что спрятал его. Почему я сказал  «Почти что»? Об этом чуть позже, для начала давайте взглянем на то, что у нас вышло.

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

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li></li>
</ul>

Добавим для них свои правила.

.first { width: 150px;}
.third { width: 200px;}

Проверяем.

Я специально увеличил ширину экрана, чтобы при маленькой ширине блоки не перескакивали на другую строку, как обычные слова в тексте. Но, если посмотреть на результаты алгоритма, то он работает! Пробелы между элементами остаются равнозначными, даже не смотря на то, что у двоих из них, мы увеличили ширину.
Т.е. можно с лёгкостью заявлять, что этот метод, с дополнительным элементом в конце — даёт отличный результат и, если ограничить экран по ширине, то его применение на практике нас не разочарует.
Так, ну а теперь, пожалуй, настало время подлить ложку дёгтя.
Во-первых, как вы могли заметить, во всех примерах я перечислял все браузеры, кроме IE6-7.
Во-вторых, опять же, как вы, наверное могли видеть на рисунках, внизу нашей строки, где дополнительный элемент, есть большие, непонятные отступы.
Давайте разбираться по порядку.

Первая проблема — это проблема IE6-7. Не приводя скриншоты, скажу сразу, что наш метод там не работает. Пункты в этих браузерах прижаты друг к другу вплотную и не растягиваются в строке. Дело в том, что парсер IE6-7 полностью игнорирует закрывающие теги у элементов <li>. А нет тегов — значит нет пробелов между ними, и, следовательно text-align: justify пропускает нашу строку, состоящую по сути из одних «строчно-блочных» слов, прижатых друг к другу.

За решением данной проблемы мы отправляемся на самую высокую гору… на MSDN. Мда… найти что либо на этом сайте, представляет большую трудность. Но, всё же повозившись, некоторое время, решение было найдено! text-justify: newspaper — свойство для увеличения или уменьшения интервалов между буквами и между словами. MSDN заявляет, что эта вещь «Самая навороченная форма выравнивания для латинского алфавита», а вот в этой статье ещё есть и дополнение, что для арабских текстов это свойство вытягивает и сами буквы.
Отлично, нам как раз нужно что-нибудь наподобие. Давайте-ка проверим их слова на деле.

ul {
	font: 14px Verdana, Geneva, sans-serif;
	text-align: justify;

	/* Лекарство для IE6-7*/
	text-justify: newspaper;
}

	ul li  {
		background: #E76D13;
		width: 98px;
		height: 98px;
		display: inline-block;
		text-align: left;
		border: 1px solid #000;

		/* эмуляция inline-block для IE6-7*/
		//display : inline;
		//zoom : 1;
	}
	ul li. helper {
		width: 100%;
		height: 0;
		visibility: hidden;
	}
	.first { width: 150px;}
	.third { width: 200px;}

А вот и результат.

Победа! IE6-7 были побеждены их же оружием. Здорово. Теперь во всех браузерах, начиная с IE6, наш способ работает идеально. Выходит, что MSDN не подвели и их слова подтвердились на деле. Так что text-align: justify выручил нас, поэтому берём его на заметку и переходим к решению второй проблемы.

Вторая проблема связана с непонятным отступом между низом списка и нашей строкой с элементами. В чём же дело? А дело в том, что всё вполне закономерно и этими странными отступами являются ни кто иные, как межстрочный интервал (line-height) и размер шрифта (font-size), которые априори присутствуют у строк и букв в тексте. Наши элементы — блочные только внутри, а строчные снаружи, поэтому они и попадают под эти правила.
Как быть? А легко! Мы можем повесить на контейнер обнуление этих стилей, а уже у потомков восстановить их в прежнее состояние. Пробуем.

ul {
	font: 14px Verdana, Geneva, sans-serif;
	text-align: justify;

	/* Обнуляем для родителя*/
	line-height: 0;
	font-size: 1px; /* 1px для Opera */

	/* Лекарство для IE6-7*/
	text-justify: newspaper;
}

	ul li  {
		background: #E76D13;
		width: 98px;
		height: 98px;
		display: inline-block;
		text-align: left;
		border: 1px solid #000;

		/* Востанавливаем у потомков, кроме последнего*/
		line-height: normal;
		font-size: 14px;

		/* Без него в Opera будет отступ под элементами */
		vertical-align: top;

		/* эмуляция inline-block для IE6-7*/
		//display : inline;
		//zoom : 1;
	}
	ul li.helper {
		width: 100%;
		height: 0px;
		visibility: hidden;
		overflow: hidden;
	}
	. first { width: 150px;}
	.third { width: 200px;}

Результат.

До обнуления

После обнуления

Отлично! Всё получилось. Обнуление стилей у главного контейнера помогло нам. Единственное, что теперь стоит помнить, это то, что в связи с обнулением размера шрифта мы не сможем задать нашим пунктам шрифт в таких единицах длины, как em, а так же % для <body> не принесут желаемого результата. Но, а целом, наш метод работает идеально, так что можно подводить итоги и идти дальше, ведь нам же мало одного решения, нам же нужно больше и лучше, не правда ли?

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

Вариант 4 — Избавление от дополнительного элемента

В предыдущем варианте для нашей цели мы использовали дополнительный элемент, ставя его в конец списка. С одной стороны, конечно же, этот маневр принес свои плоды, но с другой… но с другой стороны создал некие неудобства. Например, при динамическом добавлении пунктов, вспомогательный блок будет только мешать, да и потом этот «хвост» портит нашу структуру, засоряя её. В этом варианте, я предлагаю избавиться от него, не испортив при этом решение.
В CSS2.1 уже давно есть такие вещи, как псевдоэлементы. Это такие абстрактные сущности, которые могут быть сгенерированы каким нибудь элементом и вставлены в его начало или конец. Почему бы не заменить таким псевдоэлементом наш лишний вспомогательный блок? Давайте попробуем…

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
ul {
	font: 14px Verdana, Geneva, sans-serif;
	text-align: justify;

	/* Обнуляем для родителя*/
	line-height: 0;
	font-size: 1px; /* 1px для Opera */

	/* Лекарство для IE6-7*/
	text-justify: newspaper;
	zoom:1;
}
	ul:after {
			width: 100%;
			height: 0;
			visibility: hidden;
			overflow: hidden;
			content: '';
			display: inline-block;

	}
		ul li  {
			background: #E76D13;
			width: 98px;
			height: 98px;
			display: inline-block;
			text-align: left;
			border: 1px solid #000;

			/* Востанавливаем у потомков, кроме последнего*/
			line-height: normal;
			font-size: 14px;

			/* Без него в Opera будет отступ под элементами */
			vertical-align: top;

			/* эмуляция inline-block для IE6-7*/
			//display : inline;
			//zoom : 1;
		}

В данной ситуации мы воспользовались псевдоэлементом :after, который сгенерировали в конце нашего списка. Выставив ему те же значения, что и бывшему, вспомогательному блоку, мы, по сути сделали тоже самое, но не залезая в разметку. Т.е. создали такой же, пустой, но полезный элемент. И вот результаты.

Здорово! Трюк с псевдоэлементом сработал. Теперь наша разметка чистая, аккуратная и без лишнего «мусора». Нам удалось избавиться от дополнительного элемента, полностью заменив его сгенерированным.
Но, как обычно, не обошлось без IE6-7 приключений. К сожалению, в браузерах IE6-7 нет поддержки :after и :before. А если нет поддержки, следовательно и нет никаких вспомогательных блоков, а значит и растягивать попросту нечего. Поэтому картина в этих браузерах такова.

Как видно из скриншота, IE6-7 полностью игнорирует пробелы между блоков, прижимая их вплотную друг к другу. Даже не смотря на то, что мы уже задействовали тяжёлую артиллерию в виде text-justify: newspaper. Почему же это происходит? Давайте выясним.
Оказывается всё дело в том, что text-justify: newspaper лишь даёт возможность растягивать наши буквы (inline-block), но не команду. Проще говоря, он рассказывает строке, как бы он хотел, чтобы она была растянута, а text-align: justify является растягивающей силой. Т.е. text-align: justify отвечает за растяжение строки, а text-justify: newspaper лишь уточняет, как именно это растяжение будет происходить.
Да, но тогда возникает вопрос: «Если есть и возможность и сила, которая может её исполнить, то почему же тогда ничего не происходит?». Ответ кроется в самом свойстве text-align: justify. Если вы помните, в обсуждении его алгоритма я упомянул о том, что он не распространяется на последнюю строку в тексте. А так как мы убрали вспомогательный элемент в конце списка, то соответственно наша строка (пускай даже она одна) с блоками — стала уже последней, и следовательно алгоритм отказался с ней работать.

Как же быть? Есть ли выход?
К счастью мир не без добрых людей, и один такой добрый человек направил меня на верный путь. Оказывается решение было у меня под носом. text-align-last — свойство, которое включает алгоритм text-align: justify в самой последней строке текста, если к ней применён этот самый text-align: justify. Проще говоря, когда мы применяем к тексту обычный text-align: justify, то, видя это, text-align-last указывает первому на то, что он поступает плохо и что ему придётся теперь работать и в последней строчке тоже.
Самое интересное, что это свойство считается ориентированным именно на Internet Explorer, в котором он нам как раз и нужен). В общем пора переходить к делу.

ul {
	font: 14px Verdana, Geneva, sans-serif;
	text-align: justify;

	/* Обнуляем для родителя*/
	line-height: 0;
	font-size: 1px; /* 1px для Opera */

	/* Лекарство для IE6-7*/
	text-justify: newspaper;
	zoom:1;

	/* Включаем в работу последнюю строку*/
	text-align-last: justify;
}
	ul:after {
			width: 100%;
			height: 0px;
			visibility: hidden;
			overflow: hidden;
			content: '';
			display: inline-block;

	}
		ul li  {
			background: #E76D13;
			width: 98px;
			height: 98px;
			display: inline-block;
			text-align: left;
			border: 1px solid #000;

			/* Востанавливаем у потомков, кроме последнего*/
			line-height: normal;
			font-size: 14px;

			/* Без него в Opera будет отступ под элементами */
			vertical-align: top;

			/* эмуляция inline-block для IE6-7*/
			//display : inline;
			//zoom : 1;
		}

Да! У нас получилось. text-align-last: justify сделал то, что от него требовалось, и сделал это на 5 баллов. Алгоритм включился в работу, в нашей последней и единственной строке. Так что празднуем победу и подводим итоги этого способа.

Ну что ж, я доволен. Доволен тем, что нам удалось найти действительно достойное решение. Причём не просто найти, а разобраться во всём и довести его до абсолютной кроссбраузерности, затратив минимум кода и не засоряя разметки. На лицо одни плюсы, а что же с минусами? Как по мне, так их попросту — нет. По сравнению с предыдущим вариантом, в этом мы только улучшили результаты. Разве что…

Единственное, что теперь стоит помнить, это то, что в связи с обнулением размера шрифта мы не сможем задать нашим пунктам шрифт в таких единицах длины, как em, а так же % для <body> не принесут желаемого результата.

Но, опять же, эти «минусы» с большой натяжкой можно назвать таковыми. Их неактуальность говорить о том, что про них можно практически забыть, если это не принципиально.
Так что в целом решение отличное, надёжное и действительно качественное.
Вариант с псевдо-элементом

Резюме

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

Все варианты воедино

1. Вариант с разносторонним выравниванием (К сожалению неработающее решение. Надеюсь, что в комментариях кто нибудь натолкнёт на верный путь)
2. Вариант с двумя колонками (Работающее решение, но только с фиксированными по ширине блоками)
3. Вариант дополнительным элементом (Работающее решение)
4. Вариант с псевдо-элементом (Работающее решение)

Обновление от 08.

10.2014

Вариант 5 — используем новые технологии

5. Вариант с использованием флексбоксов и постепенным улучшением

См. отдельную статью

P.S. Это тоже может быть интересно:

html — переполнение css — только 1 строка текста

спросил

Изменено 1 месяц назад

Просмотрено 297 тысяч раз

У меня есть div со следующим стилем CSS:

 ширина: 335 пикселей; плыть налево; переполнение: скрыто; отступ слева: 5px;
 

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

Я думал о настройке высоты, но, похоже, это неправильно.

Может быть, если я добавлю высоту, совпадающую со шрифтом, она должна работать и не вызывать проблем в разных браузерах?

Как мне это сделать?

  • HTML
  • CSS
  • переполнение

0

Если вы хотите ограничиться одной строкой, используйте пробел : nowrap; на разд.

3

Если вы хотите указать, что в этом div доступно еще больше контента, возможно, вы захотите показать «многоточие»:

 text-overflow: ellipsis;
 

Должен быть в дополнение к пробел: nowrap; , предложенный Septnuits.

Кроме того, убедитесь, что вы проверили эту тему, чтобы справиться с этим в Firefox.

3

Вы можете использовать этот код css:

 переполнение текста: многоточие;
переполнение: скрыто;
пробел: nowrap;
 

Свойство text-overflow в CSS имеет дело с ситуациями, когда текст обрезается, когда он выходит за пределы поля элемента. Это может быть обрезано (т.е. обрезано, скрыто), отображать многоточие («…», значение диапазона Unicode U+2026).

Обратите внимание, что text-overflow происходит только тогда, когда свойство overflow контейнера имеет значение hidden , scroll или auto и white-space: nowrap; .

Переполнение текста может произойти только в элементах уровня block или inline-block , потому что элемент должен иметь ширину, чтобы его можно было переполнить. Переполнение происходит в направлении, определяемом свойством direction или связанными атрибутами.

0

лучший код для UX и UI

 пробел: nowrap;
переполнение текста: многоточие;
переполнение: скрыто;
отображение: наследовать;
 

0

 ширина: 200 пикселей;
пробел: nowrap;
переполнение текста: многоточие;
переполнение: скрыто;
 

Определите ширину также для установки переполнения в одну строку

Я смог добиться этого с помощью webkit-line-clamp и следующий css:

 div {
  дисплей: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: вертикальный;
  переполнение: скрыто;
}
 

1

Я решил это, используя:

 пробел: nowrap;
переполнение: скрыто;
переполнение текста: многоточие;
 
 . txt1 {ширина: 100 пикселей;}
.txt2 {ширина: 200 пикселей;}
.мой текст{
    пробел: nowrap;
    переполнение: скрыто;
    переполнение текста: многоточие;
} 
 <дел>
А Б В Г Д Е Ж З И К Л М Н О П Р С Т Ф Х Ш Ю Я
<дел> А Б В Г Д Е Ж З И К Л М Н О П Р С Т Ф Х Ш Ю Я
<дел> А Б В Г Д Е Ж З И К Л М Н О П Р С Т Ф Х Ш Ю Я

если дополнение, пожалуйста, если у вас длинный текст, пожалуйста, вы можете использовать этот код css ниже;

 переполнение текста: многоточие;
переполнение: видимое;
пробел: nowrap;
 

сделать текст всей строки видимым.

Да, если вы хотите, чтобы он был высотой в одну строку, используйте пробел : nowrap; в div или списке. Все, что вы используете для этого, должно работать.

У меня была такая же проблема, и я решил ее, используя:

 display: inline-block;
 

на div в вопросе.

0

Твой ответ

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Преобразование двух строк в одну — Arts Hacker

CSS похож на волшебство в вашем браузере.

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

Это какие-то громкие техно-болтовни, так что я объясню немного подробнее.

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

Если вам нужна дополнительная информация, вы можете начать с введения в CSS в W3 Schools.

Итак, давайте посмотрим на хороший небольшой пример, который недавно появился в проекте.

В этом проекте у нас есть вывод имен и ролей актеров для постановки. По умолчанию это выглядит так:

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

 
Я Х. Ипстер
Продюсер
В рыцаря
Директор
Зо Сириус
Молот
Николь Лисалатер
Красная королева
Ан Гриберд
Хаммеретт

Везде, где вы видите «div» или «span», это тег-контейнер. Там, где вы видите «класс», HTML как бы дает имя этому контейнеру, чтобы мы могли ссылаться на него в другом месте, например, в CSS. Теги могут иметь атрибуты «id» или «class» для именования. «Идентификатор» должен быть уникальным для каждой страницы, а «класс» может быть общим.

Что мы хотим сделать, так это сосредоточиться на тегах div с классом «one-member», как в строке 2. Затем они содержат еще два div с классами «one-member-name» и «one-member- роль», как в строках 3 и 4. Поскольку это классы, мы можем создать селектор CSS, используя префикс точки. (Идентификаторы обозначаются префиксом из знака решетки или решётки «#».)

Мы добавим следующий CSS в нашу таблицу стилей. Поскольку вы, вероятно, используете WordPress, и большинство тем WordPress позволяют вам вводить пользовательский CSS через панель настроек, вы должны добавить это именно туда.

 .one-member-name { вес шрифта: полужирный; }
.one-member-role { стиль шрифта: курсив; }
.one-member div { display:inline; }
.one-member-name:after { content:", "; } 

В этом блоке CSS строка 1 имеет селектор «. one-member-name». Он начинается с точки, потому что это класс. Внутри фигурных скобок у нас есть один атрибут, «начертание шрифта». За атрибутом следует двоеточие, а затем значение, выделенное жирным шрифтом. Таким образом, каждый элемент (например, тег div) с классом «one-member-name» будет выделен жирным шрифтом, а имена наших актеров выделены жирным шрифтом.

Строка 2 аналогична, за исключением элементов класса «one-member-role», мы устанавливаем «стиль шрифта» курсивом. Это делает наши роли курсивом.

В третьей строке мы делаем что-то немного другое. Мы ищем все элементы класса «одночленный», затем любой тег div внутри него. В этом смысл пробела между «.one-member» и «div».

Мы используем атрибут под названием «дисплей». У него есть несколько возможных значений, но наиболее важными здесь являются «блок» и «встроенный». По умолчанию браузеры отображают теги div (и теги абзацев, используя «p» вместо «div» с использованием блока. Это означает, что после отображения содержимого мы отображаем следующий элемент на следующей строке страницы. Если отображение установлено на «встроенный», то содержимое отображается в той же строке. Теги Span работают так по умолчанию. В результате имя и роль отображаются в одной строке текста.

Строка 4 исправляет еще одну небольшую проблему, заключающуюся в том, что имя и роль теперь будут смешаны вместе без пробелов. У нас снова есть селектор «.one-member-name», но на этот раз мы включаем «: after». Это пример того, что мы называем псевдоселектором, и он позволяет нам добавлять атрибуты, которые отображаются снаружи и после элемента. Затем мы используем атрибут под названием «контент» и ставим там запятую и пробел.

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

Отлично! То, что мы здесь сделали, сложно, только если вы новичок в CSS и/или HTML. Получение вывода от плагина, чтобы поставить эти вещи в одну строку с самого начала, сложнее (потому что это должен был бы сделать ваш программист. И, возможно, он не ваш программист, а кто-то, кто написал ваш бесплатный плагин и живет в Литве). , у вас могут быть другие места, где вы не хотите, чтобы эти вещи были в одной строке по какой-то причине.

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

 

Об Аароне Овертоне

Аарон Овертон занимается созданием веб-сайтов и веб-приложений с тех пор, как Интернет был впервые открыт для коммерческого использования в начале 1990-х годов. В основном Аарон является фрилансером (его компания называется Heatherstone) для самых разных клиентов, от небольших до крупных компаний. Он также провел три года, создавая веб-ресурсы в Microsoft. Среди его интересных подработок — преподавание компьютерного программирования в государственной средней школе и издание настольных миниатюрных варгеймов. Если у вас возникли проблемы с его поиском, найдите его жену, Нху, а он обычно находится не более чем в 20 футах от вас.

Просмотреть все сообщения Аарона Овертона

Добавляйте разрывы и линии к своему контенту — создавайте свои первые веб-страницы с помощью HTML и CSS

https://vimeo. com/270702335

С помощью классов и идентификаторов мы увидели, что можно настроить внешний вид определенных элементов.

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

Для этого можно использовать разрывы строк или горизонтальные линейки (т. е. линии)!

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

Разрывы строк

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

Видите пробел между «Строкой 1» и «Строкой 2» на следующем изображении? Это пространство автоматически добавляется к элементу HTML (с помощью CSS):

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

Однако иногда вам не нужен этот дополнительный пробел. Вам понадобится меньше места между строками:

Меньше места между двумя разными строками

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

Для создания разрывов строк в HTML используйте тег
. Закрывающий тег не нужен.

 

Поместье Тоби

<р> 125 N 6-я улица
Бруклин, Нью-Йорк 11249

В приведенном выше коде между «125 N 6th St» и «Brooklyn, NY 11249» будет разрыв строки, в котором не будет неимоверного пространства между двумя элементами абзаца. Это будет просто хороший разрыв строки!

Адреса с разрывами на отдельные строки

Вот как будет выглядеть адрес в виде двух отдельных элементов

вместо одного абзаца, содержащего разрыв строки:

Адрес со строками в виде отдельных абзацев: странный внешний вид

Странное количество места, верно? Это также не имеет семантического смысла, потому что адрес — это одна единица, поэтому разделение его на несколько абзацев неуместно.

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

Горизонтальные правила

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

Чтобы создать линию или «горизонтальную линейку» в HTML, просто используйте тег


.

  

Манхэттен

... <час> ...

Бруклин

Горизонтальное правило

Вот полный HTML-код статьи о кофейне (найдите теги
и


!):

 

Лучшие кофейни Нью-Йорка

В Нью-Йорке есть отличные кофейни. Не пропустите горячие новые адреса, открывающиеся слева и справа!

Манхэттен

Фасоль

<р> 824 Бродвей
Нью-Йорк, NY 10003

В городе есть несколько магазинов Bean. Это хорошее место, чтобы поработать, потому что они открыты допоздна.

Третья направляющая

<р> ул. Салливан, 240
Нью-Йорк, NY 10012

Кофе и пончики! Чего еще можно желать?

Кофе Блэк Фокс

<р> Сосновая улица, 70
Нью-Йорк, NY 10270

У Black Fox невероятный выбор фасоли и вкусных закусок.

Стамптаун

<р> 18 Вт 29ул
Нью-Йорк, NY 10001

Это вообще нужно объяснять?

<час>

Бруклин

Поместье Тоби

<р> 6-я улица, 125 N
Бруклин, Нью-Йорк 11249

Toby's значительно вырос по сравнению со своим первоначальным местоположением в Бруклине. Теперь у них три офиса в Нью-Йорке.

Практика!

Перейдите к этому упражнению CodePen. Вы добавите новый раздел для района Квинс, используя горизонтальную линейку. Вы добавите одну кофейню в Квинсе (реальную или воображаемую), обязательно создав ее адрес с использованием разрыва строки.

  1. Добавьте горизонтальную линейку (


    ) в разделе Brooklyn.

  2. Создайте заголовок (

    ) для ферзей под горизонтальной линейкой.

  3. Создайте поддельную кофейню (название и адрес) и добавьте ее в новый раздел района Квинс. Не стесняйтесь точно имитировать код для предыдущих кофешопов, чтобы применялись те же стили CSS.

Развлечение с непрактичным CSS: создание однострочного веб-сайта

Путь к созданию «однострочного» веб-сайта

Изображение предоставлено автором

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

Вы можете получить исходные файлы и следовать инструкциям на моем GitHub.

donk/One-line-website-tutorial

Файлы и изображения-заполнители для однострочного руководства по веб-сайту GitHub является домом для более чем 50 миллионов разработчиков, работающих…

github.com

Хотя JavaScript находится в центре внимания современного веб-дизайна, CSS3 сам по себе стал довольно мощным, предоставляя нам множество полезных селекторов для управления почти каждым визуальным аспектом сайта и возможность наслаивать и анимировать элементы интересными способами. Мы собираемся воспользоваться некоторыми из них в этой статье.

Что такое CSS?

CSS — это основа любого веб-проекта. Без него Интернет был бы очень скучным местом, в основном документом Word. Создание однострочного веб-сайта зависит от некоторых хитрых приемов CSS3, поэтому базовое понимание CSS очень полезно. Если вы новичок в CSS и хотите узнать больше, Брэдли Найс составил хорошую статью с ресурсами, которые дают хороший толчок.

Полное руководство по CSS + шпаргалки 📑

Брэдли Найс, контент-менеджер ClickHelp.com — профессиональный инструмент технического письма

medium.com

26 Впечатляющие веб-проекты, созданные только с помощью CSS.

Мы сравнили почти 12 000 проектов на чистом CSS, чтобы выбрать 26 лучших.

medium.mybridge.cos

креативность! Хотя большинство этих примеров визуально очень красивы, я хотел посмотреть, смогу ли я воспользоваться приемами, использованными в статье, чтобы сделать что-то более функциональное, похожее на обычную веб-страницу. Оказывается, это не только возможно, но и довольно интересно.

Ну, не то чтобы сказочный… На самом деле, я не думаю, что многие действительно говорили о создании однострочного веб-сайта, потому что, честно говоря, в целом это довольно ужасная идея. Как бы то ни было, оказывается, что если вы решите использовать CSS3 исключительно для дизайна, вам понадобится только одна строка кода: ссылка на саму таблицу стилей!

Мы собираемся сделать это, используя всего одну строку HTML (ноль в Firefox)

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

Любой HTML-тег может иметь стиль

Поскольку мы можем изменить свойство display в CSS, мы можем обращаться с любым тегом как с обычным

, даже вне тела, а отметьте себя!

Благодаря магии CSS (даже встроенным) то, что обычно является скрытым функциональным тегом, теперь представляет собой зеленый квадрат!

Современные браузеры заполняют пробелы в нашем HTML

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

Это пустой файл HTML!

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

Псевдоэлементы делают все возможным

Псевдоэлементы — это хлеб с маслом для создания этих страниц. Только псевдоэлементам можно дать content свойство, которое является единственным способом получить текст на веб-странице (кроме использования изображений).

Тот же пустой HTML-файл с псевдоэлементами!

Поскольку каждый HTML-тег имеет псевдоэлемент :before и :after , это дает нам тройное количество тегов для работы. Это дает нам до двенадцати элементов, чего достаточно для создания веб-страницы.

Уловки на стороне сервера могут сделать вещи динамичными

Этот метод довольно часто используется для веб-сайтов: вы можете установить Content-type HTTP-заголовок в text/css и создайте любую обычную логику PHP/Node для вывода динамического CSS с любыми специальными данными, которые вы хотите. Мы расскажем об этом в другой статье; сейчас мы сосредоточимся на основной концепции стиля.

Мы также можем использовать магию на стороне сервера, чтобы сделать сайт с нулевой строкой!
Это довольно ловкий трюк, но, к сожалению, он работает только в Firefox. Вы можете включить таблицу стилей в заголовки с помощью PHP, который будет загружать стили, не используя HTML. Минус в том, что нет , поэтому вы не можете стилизовать его, потеряв три элемента. Вам также потребуется резервная поддержка Chrome/Edge с использованием тега , как обычно. Я использую эту технику на другом однострочном сайте, который я сделал: www.isspencerpooping.com

Теперь, когда мы знаем, что есть достаточно элементов, которые можно стилизовать, чтобы, по крайней мере, получить некоторое подобие структуры, мы можем начать с нашего однострочный сайт!

Создайте файлы

Сначала нам нужно создать index.html и style. css файл где-то. Откройте их в своем любимом редакторе и добавьте весь исходный код HTML в файл index.html :

Спланируйте структуру

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

В таблице слева показана структура, используемая справа. Довольно аккуратно!

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

Фон и основной контейнер

В соответствии со структурной схемой нам нужен фон в html:before .

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

Добавление содержимого: область заголовка

Теперь, когда у нас есть контейнер, мы можем начать создавать содержимое. Мы начнем с области заголовка, которая показывает имя покемона, их номер Pokédex и их типы. Мы добавим несколько SVG в следующий блок кода, поэтому убедитесь, что вы взяли их с GitHub.

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

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

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

Мы добавим стиль к тегу head , чтобы мы могли видеть основное содержимое, а затем завершим область заголовка, добавив изображение Ludicolo с помощью селектора head:after . Динамическое изменение изображения будет рассмотрено в другой статье.

Вот так! Наконец-то что-то видно, и мы уже на полпути!

Трюки с текстом: многострочный контент

Теперь, когда мы создали область заголовка контента, стилизовав заголовок , нам нужно поработать над получением фактического текстового содержимого. Хотя мы использовали свойство content раньше для имени покемона, нам понадобятся разрывы строк для разделения содержимого. Как правило, текст свойства content будет действовать как одна строка текста и обычно будет переноситься в пределах ширины родителя, но мы можем заставить содержимое обтекаться \a , установив white-space:pre-wrap; .

Использование пробела: предварительная обертка; позволяет нам создавать разрывы строк с помощью \a

Добавьте описание

Далее мы добавим описание на страницу. Это будет использовать описанный выше трюк, чтобы мы могли отделить базовую статистику от описания. Мы также устанавливаем ширину на 50% и добавляем поле вверху, чтобы освободить место для текста рода и диаграммы статистики.

Завершите с родом и изображением статистики

Наконец, мы закончим все, добавив название рода и изображение статистики. Это использует пространство, созданное описанием, поэтому мы можем расположить link:after под ним, что позволяет нам иметь изображение статистики справа с background-position и genus сверху в поле, которое мы установили выше.

Обновите свою страницу, и вы получите довольно симпатичную маленькую запись в Pokédex! Просмотрите источник, и вы увидите, что он показывает только ссылку. Довольно аккуратно, правда? Вы можете сделать страницы намного сложнее, чем мы сделали в этой статье, но имейте в виду, что есть несколько недостатков.

Предостережения для однострочных веб-страниц

  • Взаимодействие с пользователем практически отсутствует. Посетители даже не смогут выделить или скопировать какой-либо наш текст.
  • Элементов не так много, а структура макета может затруднить реализацию некоторых идей.
  • В дополнение к вышесказанному, только восемь из 12 элементов могут использоваться для текста.
  • Файл CSS может быть немного запутанным (это может быть личной проблемой).
  • Несмотря на то, что мы можем сделать довольно приятный дизайн, он слишком прост для использования на любом профессиональном веб-сайте.

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

Вы можете просмотреть динамическую версию, которую мы будем делать в следующей статье, по адресу https://www.notlikely.me/pokedex.

Спасибо за прочтение! Надеюсь, вам понравилась эта статья и вы узнали что-то новое. Если у вас есть какие-либо вопросы или вы хотите, чтобы что-то объяснили немного лучше, дайте мне знать!

Что нужно и что нельзя делать при добавлении разрыва строки HTML

В HTML абзац всегда начинается с новой строки, но что, если вы хотите, чтобы текст внутри абзаца начинался с новой строки? В этом случае вам нужно будет создать разрыв строки HTML.

Давайте подробнее рассмотрим этот HTML-элемент и способы его использования ниже.

Что такое разрыв строки в HTML?

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

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

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

См. раздел Pen Paragraph vs Line Break Element от Christina Perricone (@hubspot) на CodePen.

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

Теперь, когда мы поняли идеальный вариант использования разрывов строк, давайте рассмотрим, как их создавать в HTML.

Как сделать разрыв строки в HTML

Чтобы сделать разрыв строки в HTML, используйте тег
. Просто поместите тег там, где вы хотите принудительно разорвать строку. Поскольку разрыв строки HTML — это пустой элемент, закрывающий тег отсутствует.

Ниже приведен HTML-файл с элементами

и
.

Поскольку элемент
чаще всего используется для отображения стихов или адресов, давайте рассмотрим пример. Скажем, я хочу отобразить на веб-странице «kitchenette building» Гвендолин Брукс.

В этом случае я бы заключил строфы в теги

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

Вот HTML:

 

кухонное здание


Мы существа сухих часов и невольного плана,

Серые и серые. "Мечта" звучит головокружительно, но не сильно

Как "рента", "накормить жену", "удовлетворить мужчину".


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

Его бело-фиолетовое, бой с жареной картошкой

И вчерашний мусор, созревающий в холле,

Вихрь, или пой арию по этим комнатам


Даже если бы мы были готовы его впустить,

Успели его согреть, содержать в чистоте,

Предвидеть сообщение, дать ему начаться?


Мы удивляться. Но не хорошо! ни на минуту!

Поскольку Номер Пять сейчас не в ванной,

Мы думаем о теплой воде, надеемся попасть в нее.

-Гвендолин Брукс< /em>

Вот результат:

См. Pen Poem with line break element Кристины Перриконе (@hubspot) на CodePen.

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

Разрыв строки HTML не работает

Если разрыв строки HTML не работает, особенно если вы работаете в текстовом редакторе CMS, такой как WordPress, возможно, вы неправильно используете элемент.

Наиболее распространенное неправильное использование HTML-тега новой строки — его использование в целях презентации. Практически для всего, что связано с макетом, вместо этого вы должны использовать CSS.

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

Почему? Две причины.

  1. Использование элемента разрыва строки HTML, когда доступен более семантический элемент, делает ваш код менее доступным, особенно для читателей, использующих программы чтения с экрана.
  2. Использование тега
    для принудительного разрыва строки исключительно в презентационных целях может хорошо выглядеть в вашем браузере, но не в других браузерах или устройствах, особенно если ваш сайт адаптивен. Адаптивный сайт автоматически изменит макет в зависимости от размера экрана. Таким образом, он уже будет переносить текст по мере необходимости и переносить текст, когда дело доходит до тега
    . Это приведет к прерывистым, неровным блокам текста. Давайте посмотрим на пример.

Например, я хочу показать отрывок из пьесы Дрянь: Священное Писание . Я должен использовать элемент блочной кавычки, который автоматически добавит поля слева и справа от текста. Если бы я использовал тег
для имитации отступа элемента блочной кавычки, я бы неправильно использовал HTML-тег новой строки.

Вот правильный HTML:

 


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



—PRIEST, Дрянь: Священное Писание

Вот результат:

См. Pen YzZpaRG Кристины Перриконе (@hubspot ) на CodePen.

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

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

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

Вот неправильный HTML:

 

Любовь ужасна! Это ужасно. Это больно. Это пугает, заставляет сомневаться в себе, осуждать

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

Это делает тебя одержимой своими волосами. Делает тебя жестоким. Заставляет вас говорить и делать то, чего вы никогда не делали

думал, что вы подойдете.

—PRIEST, Дрянь: Писание

Вот результат:

См. перо Неправильное использование элемента
для отображения отрывка из пьесы Кристина Перриконе (@hubspot) на CodePen.

Совет для профессионалов: Чтобы текст отображался или разрывался определенным образом, используйте семантически значимый элемент HTML или CSS вместо элемента разрыва строки, чтобы избежать проблем с макетом, таких как прерывистый текст и неровные края.

Если вы измените размер окна браузера, вы заметите, что элемент абзаца с элементами разрыва строки приводит к неровным краям и неровным строкам текста.

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

Чтобы узнать больше о том, как сделать свой веб-сайт доступным, ознакомьтесь с The Ultimate Guide to Web Accessibility.

Добавление разрывов строк в HTML

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

Примечание редактора: этот пост был первоначально опубликован в мае 2021 года и обновлен для полноты.

Темы: HTML

Не забудьте поделиться этим постом!

Как создать текст разного размера в одной строке с помощью Elementor и CSS

Хотите выделить определенные слова и сделать их больше, чем остальной текст на вашем сайте, но вы не знаете, как это сделать в Элементор?

Посмотрите это видео о том, как создать именно это, или продолжайте читать ниже!