Как обрезать блок css
Перейти к содержимому

Как обрезать блок css

  • автор:

Как обрезать текст и добавить в конце многоточие?

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

Способ обрезания текста зависит от длины и числа строк.

Однострочный текст

Для одной строки есть специальное свойство text-overflow со значением ellipsis , которое добавляет многоточие в конце текста. Чтобы это свойство работало, нужно соблюсти ещё два условия.

  1. Текст должен выводиться в одну строку без переносов. Для запрета переносов мы используем свойство white-space со значением nowrap .
  2. Текст за пределами блока скрывается от просмотра с помощью свойства overflow со значением hidden .

Комбинируя три свойства white-space, overflow и text-overflow получим обрезанную строку с многоточием в конце (пример 1).

Пример 1. Использование text-overflow

Результат данного примера показан на рис. 1.

Вид обрезанного однострочного текста

Рис. 1. Вид обрезанного однострочного текста

Многострочный текст

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

  1. Свойство -webkit-line-clamp, которое ограничивает число строк. Значение 3 отобразит три строки, значение 4 — четыре строки.
  2. Свойство display со значением -webkit-box .
  3. Свойство -webkit-box-orient со значением vertical .
  4. Свойство overflow со значением hidden , оно скрывает текст за пределами блока.

Заметьте, что в большинстве случаев мы имеем дело не со стандартными стилевыми свойствами, а добавляем к ним префикс -webkit-. При этом все эти свойства с префиксами работают даже в Firefox.

Свойство display: -webkit-box в настоящий момент устарело, при вёрстке сейчас используется display: flex . Аналогично устарело и -webkit-box-orient: vertical , сейчас вместо него применяется flex-direction: column . При этом нельзя просто заменить устаревшие свойства современными, перестанет работать ограничение строк.

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

.

Пример 2. Использование -webkit-line-clamp

Результат данного примера показан на рис. 2.

Вид обрезанного многострочного текста

Рис. 2. Вид обрезанного многострочного текста

Обратите внимание, что здесь нам не нужен text-overflow, многоточие добавляется через свойство -webkit-line-clamp.

Использование JavaScript

Если не хочется связываться с устаревшими свойствами, всегда можно воспользоваться JavaScript для решения нашей задачи. Библиотека Clamp.js позволяет выбрать алгоритм работы — с помощью -webkit-line-clamp , в этом случае применяется набор свойств из примера 2 или путём явного обрезания строки (пример 3).

Пример 3. Использование Clamp.js

Обратите внимание на параметр useNativeClamp . По умолчанию его значение равно true , в этом случае к элементу добавляется свойство -webkit-line-clamp . Если же указать значение false , тогда строка обрезается явно. Между этими алгоритмами Clamp.js есть небольшая разница, заметная при изменении размера окна браузера. Использование useNativeClamp:true обрезает строку лишь при необходимости, когда она превышает три строки. useNativeClamp:false обрезает всегда и при изменении размеров блока строка так и остаётся обрезанной.

overflow

Обрезать ли то, что не поместилось в блок? Или показывать скролл?

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

Обновлено 8 мая 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство overflow позволяет буквально определить, что делать с содержимым блочного (то есть для элемента, у которого display определяется как block , inline — block , flex или grid ) элемента, если оно не влезает в размеры — отобразить или обрезать (с полосами прокрутки или без).

Пример

Скопировать ссылку «Пример» Скопировано

Если содержимое блока будет больше, чем границы блока, оно будет «обрезано»:

 .article  /* Задаём ограничения по размеру блока */ width: 300px; height: 300px; overflow: hidden;> .article  /* Задаём ограничения по размеру блока */ width: 300px; height: 300px; overflow: hidden; >      

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 .selector  overflow: hidden;> .selector  overflow: hidden; >      

Как понять

Скопировать ссылку «Как понять» Скопировано

Синтаксис свойства позволяет задать два значения — для оси x и оси y. Если указано одно значение, оно равнозначно применяется для обеих осей. Аналогичного результата можно добиться, используя самостоятельные CSS-свойства overflow — x и overflow — y .

Значения

Скопировать ссылку «Значения» Скопировано

  • visible — содержимое отображается снаружи родительского блока, если его размеры больше размеров «родительского» блока (значение по умолчанию);
  • hidden — содержимое, выходящее за пределы «родительского» блока, обрезается по его границам без прокрутки;
  • clip — новое значение, похожее по результату на hidden , но границы родительского блока рассчитываются с учётом внутренних отступов;
  • scroll — контент обрезается по границам «родительского» блока, но внутри этой области содержимое доступно с помощью прокрутки;
  • auto — если содержимое переполняет блок, контент будет доступен для прокрутки.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

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

�� Задавая родительскому блоку фиксированную высоту, учитывайте, что, если не указан box — sizing : border — box , то это значение не учитывает внутренние отступы, заданные с помощью padding , что может спровоцировать появление нежелательной прокрутки.

На практике

Скопировать ссылку «На практике» Скопировано

Realetive советует

Скопировать ссылку «Realetive советует» Скопировано

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

Ещё один пример, когда будет полезно знание свойства overflow — обрезание текста с многоточием (в сочетании со свойством text — overflow : ellipsis или недокументированного -webkit — line — clamp ):

Как обрезать блоки с помощью CSS?

Необычный дизайн

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

Отслеживать
задан 21 мая 2016 в 20:13
95 1 1 золотой знак 1 1 серебряный знак 10 10 бронзовых знаков
опишите подробнее, что происходит по наводке, как именно увеличивается фон
21 мая 2016 в 20:41

фон(изображение) увеличивается по центру, я пробовал блоки transform:skew наклонять, но это не то, может какие то идее есть.

21 мая 2016 в 21:23

на вскидку приходит идея сделать на canvas блоки, и тогда если у блока будет overflow: hidden всё будет обрезаться как надо

21 мая 2016 в 21:29

Я тоже подумал об этом, пробовал еще skew’ом наклонять блоки, а внутренний блок повернуть обратно, только вот border не выходит. Думал еще clip-path использовать, но тут напрочь можно забыть про поддержку старых браузеров

21 мая 2016 в 21:33
codepen.io/anon/pen/mPNEex?editors=0100 это я не доделал ещё
22 мая 2016 в 16:28

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Предлагаю никак не обрезать.

html
для создания нижнего блока в виде ромба, достаточно повернуть прямоугольный или квадратный блок под 45%, при этом родительскому блоку выставить overflow: hidden .

.parent < overflow: hidden; >.child

Т.к. разворот под 45 градусов, предпалагет разворот и внутренного содержимого под 45, то внут. содержимое нужно развернуть под 45 градусов в обратном направлении.

.child < transform: rotate(45deg); >.child__inner

изображение
Изображения при этом никак особенно обрезать не надо, желательно что бы оно было достаточно большое, для компенсации зума.

недостатки
Приходится вручную подгонять координаты ромба и внут. содержимого.

Для html и css используются препроцессоры jade и stylus соотвественно. Если с ними не знакомы, там в каждом блоке есть кнопка View Compiled

Как обрезать div?

5b374146df2e1079695378.jpeg

Здравствуйте профессионалы! В форуме нашел много похожих вопросов по такой теме «Как обрезать блок / или скошенный угол у блока» , но ответ не нашел(
Суть вопроса такая:
-как обрезать(скосить) угол у при не однородном фоне и вообще фон будет меняться, а блок всегда должен быть такой же!
— этот блок будет заполняться информацией (img, p, a) и т.д.
— при наведение на него :hover к нему должен применяться border по всему блоку с углом
— clip-path не подходит (IE)
— svg тоже
Может псевдоэлементами, но у меня не получалось(
Подскажите пожалуйста в каком направление работать над задачей?

  • Вопрос задан более трёх лет назад
  • 5211 просмотров

Комментировать
Решения вопроса 0
Ответы на вопрос 2
ColdSpirit @ColdSpirit

https://stackoverflow.com/questions/7324722/cut-co.
Думаю это то что вы ищете. Тут куча ответов, мб найдете для себя что-нибудь

Ответ написан более трёх лет назад
Нравится 1 1 комментарий

AlexFo90

AlexFo90 @AlexFo90 Автор вопроса
Хорошо, спасибо, пойду посмотрю по ответам)
junior full-stack сисадмин

Ие не поддерживает свг? Даже в качестве фонового изображения?

Если поддерживает, то на ум приходит следующее:
1) обычный прямоугольный див без фонового цвета. В нем создаём псевдоэлемент с размером под площадь уголка + отступы, прижатый к верхнему правому углу. (Мы будем заполнять блок текстом, а псевдоэлемент не даст тексту залезать в площадь угла.
2) делаем векторную картинку с границей и срезанным уголком и ставим ее как фон у дива. Обязательно ширина и высота должны быть больше, чем предполагается использовать.
Векторная для того, чтобы при ресайзе не портилось качество. Фоновый свг позиционируем точно под псевдоэлемент, и задаём фиксированные размеры ему! Это чтобы при ресайзе уголок не менял пропорции.
2.1) у нас осталась проблема с отсутствующей отрисовкой границ снизу и слева. Решаем ее или с помощью множественных фоновых изображений (повторяем наш свг с этими отрисованными границами), или создаём дополнительные дивы с абсолютным позиционированием и прижатием к левой/нижней границе с заполнением цветом и толщиной / высотой в 1-2 пикселя.

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

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

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