Как обрезать элемент
Как обрезать div как на картинке? Свойство border-radius не подходит, т.к. скругливает, а мне нужна ровная линия
Отслеживать
2,969 3 3 золотых знака 15 15 серебряных знаков 30 30 бронзовых знаков
задан 17 фев 2016 в 13:29
Khotey Vitaliy Khotey Vitaliy
637 6 6 серебряных знаков 12 12 бронзовых знаков
обрезать то, что черным?
17 фев 2016 в 13:29
В принципе не важно, главное чтобы эффект был тот же
17 фев 2016 в 13:34
transform: skew?
17 фев 2016 в 13:34
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Css-треугольники вам в помощь
.black < background-color: black; padding: 20px 50px 0; width: 400px; >.block < background-color: green; padding: 10px; position: relative; color: #FFF; width: 80px; >.block::before < content: ''; position: absolute; top: 0; left: -20px; border-style: solid; border-width: 0 0 40px 20px; border-color: transparent transparent green transparent; >.block::after
Блок Отслеживать
ответ дан 17 фев 2016 в 13:38
Jean-Claude Jean-Claude
5,830 2 2 золотых знака 19 19 серебряных знаков 45 45 бронзовых знаков
- html
- css
- html5
- css3
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как обрезать элемент на CSS (свойства overflow, text-overflow и clip)
По умолчанию если в заданные размеры содержимое блока не помещается, то оно отображается поверх него.
Например, ооооооооооччччччччччеееееееееенннннннннньььььььььь_длинное_слово.
CSS свойство overflow
Для предотвращения переполнения у блочных элементов применяется свойство overflow (overflow-x управляет горизонтальной прокруткой, overflow-y — вертикальной). Оно бесполезно для таких HTML элементов как textarea и input.
▼ hidden scroll auto ► x y
содержимое выходит за границы установленной ширины и высоты элемента содержимое, которое выходит за пределы блока, скрыто в обязательном порядке, вне зависимости от того, нужна она или нет, добавляется полоса прокрутки только при необходимости появляется полоса прокрутки по горизонтали по вертикали
ооооооооочччччччччееееееееенннннннннььььььььь_длинное_первое_слово ооооооооочччччччччееееееееенннннннннььььььььь_длинное_второе_слово ооооооооочччччччччееееееееенннннннннььььььььь_длинное_третье_слово
div < overflow-x-y: visiblehiddenscrollauto; width: 50%; >
overflow и position: absolute;
Элемент с position: absolute; перемещается в рамках другого элемента с position, отличного от static. То есть родитель с overflow: hidden; и position: static; не будет обрезать содержимое потомка с position: absolute; или position: fixed.
▼ hidden r a r s a r s f
position: relative;
position: relative;
overflow: hidden;
position: absolute; position: fixed;
Полоса прокрутки (scrollbar) и position: fixed;
Полоса прокрутки, принадлежащая тегу html, не перекрывается элементом с position: fixed. Это является проблемой для модального окна, распахнутом на весь экран. Решение просто как две копейки: нужно убрать прокрутку у html и добавить при необходимости прокрутку у body.
▼ прокрутка у body
См. красная стрелка в правом нижнем углу браузера.
CSS свойство text-overflow: закончить многоточием
При overflow не в значении visible текст становится не читаемым, обрезаясь на полуслове. Особенно, если его перенос на другую строку запрещён благодаря white-space в значении nowrap. В этом случае можно обозначить, что часть слов убрана и повествование не закончено, воспользовавшись свойством text-overflow.
▼ ellipsis «символ»
обрезать текст по размеру области с добавлением многоточия с добавлением любого знака в HEX кодировке
ооооооооочччччччччееееееееенннннннннььььььььь_длинное_первое_слово ооооооооочччччччччееееееееенннннннннььььььььь_длинное_второе_слово ооооооооочччччччччееееееееенннннннннььььььььь_длинное_третье_слово
div < width: 50%; overflow: hidden; white-space: nowrap; word-wrap: normal; /* для IE */ text-overflow: clipellipsis«\2026\20\bb»; > div:hover
CSS свойство clip
Только для элементов, которым задан position: absolute;. Единицы измерения можно выбрать px, em и т.п., но не проценты.
ооооооооочччччччччееееееееенннннннннььььььььь_длинное_первое_слово ооооооооочччччччччееееееееенннннннннььььььььь_длинное_второе_слово ооооооооочччччччччееееееееенннннннннььььььььь_длинное_третье_слово
div < width: 50%; position: absolute; clip: rect(auto, auto, auto, auto); /* rect(вверх, вправо, вниз, влево); при auto сторона остаётся без изменений, но вылезающий текст обрезается */ >
6 комментариев:
ololo Отлично! таких примеров нигде еще не встречал. не нужно в блокнот для каждого свойства лесть! NMitra Я к этому варианту пришла через тернистый путь проб и ошибок. Сама без «Шпаргалки» уже не могу — это мой блокнот. ))) Правда всё ещё она не в том состоянии, в котором я её вижу в конечном итоге. Дмитрий Емцов А подскажите пожалуйста, как сделать так, чтобы мое длинное название обрезалось только после второй строки? То есть не переносилось на третью строку, а обрезалось после конца второй. NMitra Пока это невозможно. Что-то подобное я видела в «черновиках», но на практике нет поддержки браузерами. Евгений Гринец А подскажите пожалуйста, как сделать так, чтобы мое длинное название обрезалось только после второй строки? То есть не переносилось на третью строку, а обрезалось после конца второй.
some_class:
| First line,
| second line
| and more
.soome_class font-size: 1em;
height: 2em;
overflow: hidden;
>
NMitra Установите height, равную высоте двух строк. height двух строк = line-height * 2
Как обрезать div в css
Несмотря на то, что мониторы больших диагоналей становятся всё доступнее, а их разрешение постоянно растёт, иногда возникает задача в ограниченном пространстве уместить много текста. Например, это может понадобиться для мобильной версии сайта или для интерфейса, в котором важно число строк. В подобных случаях имеет смысл обрезать длинные строки текста, оставив только начало предложения. Так мы приведём интерфейс к компактному виду и сократим объём выводимой информации. Само обрезание строк можно делать на стороне сервера с помощью того же PHP, но через CSS это проще, к тому же всегда можно показать текст целиком, например, при наведении на него курсора мыши. Далее рассмотрим методы, как текст порезать воображаемыми ножницами.
На деле всё сводится к использованию свойства overflow со значением hidden . Различия лишь кроются в разном отображении нашего текста.
Используем overflow
Чтобы свойство overflow показало себя с текстом во всей красе, надо отменить перенос текста с помощью white-space со значением nowrap . Если это не сделать, то нужного нам эффекта не будет, в тексте добавятся переносы и он будет отображаться весь целиком. В примере 1 показано, как обрезать длинный текст указанным набором стилевых свойств.
Пример 1. overflow для текста
HTML5 CSS3 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Вид текста после применения свойства overflow
Как видно из рисунка, недостаток в целом один — не очевидно что текст имеет продолжение, так что надо дать об этом понять пользователю. Для этого обычно применяется градиент или многоточие.
Добавляем градиент к тексту
Чтобы стало понятнее, что текст справа не заканчивается, поверх него можно наложить градиент от прозрачного цвета к цвету фона (рис. 2). При этом будет создаваться эффект постепенного растворения текста.
Рис. 2. Текст с градиентом
В примере 2 показано создание этого эффекта. Стиль самого элемента практически останется прежним, сам же градиент будем добавлять с помощью псевдоэлемента ::after и CSS3. Для этого вставляем пустой псевдоэлемент через свойство content и к нему применяем градиент с разными префиксами для основных браузеров (пример 2). Ширину градиента легко изменять через width , также можно регулировать степень прозрачности, заменив значение 0.2 на своё.
Пример 2. Градиент поверх текста
HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx
Данный метод не работает в браузере Internet Explorer до версии 8.0 включительно, потому что в нём нет поддержки градиентов. Но можно отказаться от CSS3 и сделать градиент по старинке, через картинку в формате PNG-24.
Этот метод сочетается только с однотонным фоном и в случае фоновой картинки градиент поверх текста будет бросаться в глаза.
Многоточие в конце текста
Вместо градиента в конце обрезанного текста также можно использовать многоточие. Причём оно будет добавляться автоматически с помощью свойства text-overflow . Его понимают все браузеры, включая старые версии IE, и единственным недостатком этого свойства является пока его неясный статус. В CSS3 вроде это свойство входит, но код с ним не проходит валидацию.
В примере 3 показано применение свойства text-overflow со значением ellipsis , которое добавляет многоточие. При наведении курсора мыши на текст, он отображается целиком и подсвечивается фоновым цветом.
Пример 3. Использование text-overflow
HTML5 CSS3 IE Cr Op Sa Fx
Результат данного примера показан на рис. 3.
Рис. 3. Текст с многоточием
Большим плюсом указанных методов служит тот момент, что градиент и многоточие не отображаются если текст короткий и целиком помещается в заданную область. Так что текст будет выводиться как обычно, когда он целиком виден на экране и обрезаться при уменьшении ширины элемента.
Как обрезать блоки с помощью CSS?
Вот есть 3 блока, два с верху и один с низу, два верхних обрезают нижний, а линия между ними это border, при наводке на любой блок, фон увеличивается, я никак не могу придумать как обрезать.
Предлагаю никак не обрезать.
html
для создания нижнего блока в виде ромба, достаточно повернуть прямоугольный или квадратный блок под 45%, при этом родительскому блоку выставить overflow: hidden .
Т.к. разворот под 45 градусов, предпалагет разворот и внутренного содержимого под 45, то внут. содержимое нужно развернуть под 45 градусов в обратном направлении.
изображение
Изображения при этом никак особенно обрезать не надо, желательно что бы оно было достаточно большое, для компенсации зума.
недостатки
Приходится вручную подгонять координаты ромба и внут. содержимого.
Для html и css используются препроцессоры jade и stylus соотвественно. Если с ними не знакомы, там в каждом блоке есть кнопка View Compiled
Обрезать содержимое блока, если оно выходит за его пределы
Выручайте! Есть блок div , выглядит как полоса, положение и размеры прописаны в css. Как можно отобразить его , к примеру на 63%? Желательно используя css.
P.S значение % находится в js, но насколько я знаю, с его помощью можно изменять css, но это уже другая тема.
Текст выходит за пределы блока
Почему текст выходит за пределы блока левого,хочу разместить в левом блоке ссылки а они выходят за.
При изменении масштаб текст выходит за пределы блока
Вот есть три дива меню текст по центру и фотка!! При увиличении зума браузере текст тот что по.
Содержимое вылезает за пределы блока
Имеется родительский блок, в котором назначено position:relative. В нем размещены два других с.
Div выходит за пределы родительского блока при масштабировании (+скрин)
Есть внешний div (outer-outer), первый внутренний (outer), второй внутренний (inner) и внутри него.
Как обрезать div?
Здравствуйте профессионалы! В форуме нашел много похожих вопросов по такой теме «Как обрезать блок / или скошенный угол у блока» , но ответ не нашел(
Суть вопроса такая:
-как обрезать(скосить) угол у при не однородном фоне и вообще фон будет меняться, а блок всегда должен быть такой же!
— этот блок будет заполняться информацией (img, p, a) и т.д.
— при наведение на него :hover к нему должен применяться border по всему блоку с углом
— clip-path не подходит (IE)
— svg тоже
Может псевдоэлементами, но у меня не получалось(
Подскажите пожалуйста в каком направление работать над задачей?
- Вопрос задан более трёх лет назад
- 3575 просмотров
- Вконтакте
Ие не поддерживает свг? Даже в качестве фонового изображения?
Если поддерживает, то на ум приходит следующее:
1) обычный прямоугольный див без фонового цвета. В нем создаём псевдоэлемент с размером под площадь уголка + отступы, прижатый к верхнему правому углу. (Мы будем заполнять блок текстом, а псевдоэлемент не даст тексту залезать в площадь угла.
2) делаем векторную картинку с границей и срезанным уголком и ставим ее как фон у дива. Обязательно ширина и высота должны быть больше, чем предполагается использовать.
Векторная для того, чтобы при ресайзе не портилось качество. Фоновый свг позиционируем точно под псевдоэлемент, и задаём фиксированные размеры ему! Это чтобы при ресайзе уголок не менял пропорции.
2.1) у нас осталась проблема с отсутствующей отрисовкой границ снизу и слева. Решаем ее или с помощью множественных фоновых изображений (повторяем наш свг с этими отрисованными границами), или создаём дополнительные дивы с абсолютным позиционированием и прижатием к левой/нижней границе с заполнением цветом и толщиной / высотой в 1-2 пикселя.
П.с. сейчас подумал — можно и с растровым фоновым изображением — все равно мы задаём фиксированные размеры и делаем картинку больше, чем предполагается — угол не будет деформироваться.
Похожие публикации:
- Как работать с grid css
- Как разместить два блока рядом css
- Как разобрать наушники mi true wireless earbuds basic 2
- Как расположить список горизонтально css
Как можно разрезать div напополам?
Надо вот так:
- Вопрос задан более трёх лет назад
- 391 просмотр
Комментировать
Решения вопроса 1
HamSter @HamSter007
HTML/CSS верстальщик
Ответ написан более трёх лет назад
Нравится 6 9 комментариев
DTX @DirecTwiX Автор вопроса
А если там будет 5 букв? Разрез должен проходить посередине буквы
букву не разрежешь, если только сделать её графикой, тогда да,- но тогда это уже и не текст будет.
DTX @DirecTwiX Автор вопроса
Максим Тюльпаков: да спрятать можно вторую половину блока — вопрос, как лучше это сделать
HamSter @HamSter007
DTX @DirecTwiX Автор вопроса
HamSter: спс. Мб ещё подскажешь, почему сейчас margin: 1rem auto не работает?
HamSter @HamSter007
DTX: смотря для чего, если для .abc то из-за абсолютного позиционирования, а если для wrap, то ширину задать и заработает