0:00
В этом видео я познакомлю вас с многоколоночностью, а также свойствами,
которые могут контролировать переполнение текста.
Поехали! Что же такое многоколоночность?
Многоколоночность — это прием верстки газет, который позволяет большие,
широкие блоки текста разделить на несколько узких колонок,
для того чтобы было удобнее читать.
Сейчас я познакомлю вас со свойствами,
которые позволяют этого добиться с помощью CSS.
Предположим, у нас есть текст.
Он будет находиться просто в тэге div.
И выглядит он так.
Далее мы можем указать нужное количество колонок с помощью свойства column-count.
Сейчас я указываю свойства column-count со значением 2, что как бы говорит браузеру,
что данный текст нужно разделить на две колонки, и получаю нужный результат.
Также я могу поменять расстояние между колонками, используя свойство column-gap.
В данном случае я делю наш текст на две колонки,
и расстояние между этими колонками установлю в 300 пикселей.
Вижу немного другой результат.
С помощью свойства column-rule можно добавить разделитель между колонками,
задав ширину, тип и размер данного разделителя.
В данном примере я делю текст на две колонки и между ними устанавливаю
разделитель два пикселя, сплошной, зеленого цвета, и вижу результат.
С помощью свойства column-width можно указать ширину колонок.
Хочу обратить ваше внимание,
что в данном случае я не указываю количество колонок — только их ширину.
А также указываю разделитель, для того чтобы было легче понять, что происходит.
В данном случае установлена ширина колонок 200 пикселей,
но по факту они чуть уже, чем 200 пикселей.
Всё потому, что браузер, если вы ему не указываете, на сколько колонок делить,
а только указываете ширину, сам решает, как лучше выстроить контент.
В данном случае он разделил наш контент на четыре колонки.
Если необходимо добавить заголовок или сноску на всю ширину ваших колонок,
то можно это сделать с помощью свойства column-span со значением all.
В данном случае немножко меняется верстка, остается тот же самый div с текстом,
но в середину мы добавляем заголовок третьего уровня с текстом.
А CSS выглядит так: для нашего div мы устанавливаем две колонки и разделитель,
чтобы было лучше видно.
А для заголовка третьего уровня указываем то,
что он должен разрывать колонки с помощью свойства column-span и значением all.
Ну и добавляем немножко красивости.
Видим примерно такой результат.
Стоит заметить, что упомянутые свойства поддерживаются далеко не во всех
браузерах, а если и поддерживаются, то указываются с префиксами.
Поэтому имейте это в виду, когда будете использовать данные свойства.
А сейчас хочется поговорить о переполнении текста, и что это такое.
Мы имеем табличку, в которой указано имя, фамилия и какие-то баллы.
Но тут появляется строка, в которую не влезает фамилия или не влезает имя.
Что делать в данном случае?
В первую очередь, переполнение контента следует скрыть с
помощью свойства overflow со значением hidden.
О данном свойстве вы узнаете более подробно в дальнейшем,
сейчас оно просто помогает нам в примере.
И получаем мы такой результат: как вы видите, буквы обрезались посередине,
что является не самым красивым решением.
Но уже нет залезающего текста на другие ячейки, что, несомненно, плюс.
Что мы можем сделать еще?
Чтобы сделать скрытие переполнения чуть более изящным,
используем свойство text-overflow, которое имеет два значения — clip и ellipsis.
Нам нужно значение ellipsis, так как значение clip является значением по
умолчанию и было применено в предыдущем примере, который нас не устроил.
Поэтому применив ellipsis, мы видим такой результат.
Текст также обрезался, но он закончен многоточием,
что, несомненно, более эстетично выглядит.
Также стоит не забывать, что при таком решении пользователь захочет посмотреть
полный текст этих ячеек, и нужно добавить хотя бы title, который по наведению даст
какое-то понимание пользователю о том, что в них написано.
Также хочется добавить то, что ellipsis, например,
не с таблицами работает несколько по-другому.
Об этом всём можно будет почитать по ссылке в дополнительных материалах
к видео.
В принципе, это всё,
что я хотел рассказать вам о переполнении текста и многоколоночности.
В следующем видео мы с вами разберем, что такое переносы, мягкие переносы,
и как вообще можно управлять переносами и пробелами в HTML с помощью CSS.
Мохов Олегразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Олег Семичевразработчик интерфейсов, Яндекс
