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

Как обрезать div в css

  • автор:

Как обрезать баннер по div`у

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

Причина: ширина сайта 650px, хочу поставить adsense, а 468х60 слишком мал, лучше 728х90, но с обрезанным краем =(

Ответы на пост (6) Написать ответ
14.03.2013 21:29
overflow: hidden;
14.03.2013 21:31
А разве Google за такое не наказывает?
14.03.2013 22:16
я даже боюсь представить за что тут можно наказать )
14.03.2013 21:34
Не знаю, не должен наверно. Или всё-таки должен?
14.03.2013 22:10

да полинтернета использует библиотеки jquery для навигации и всяких прочих вау-эффектов, а там на каждом шагу owerflow:hidden и display:none. и ниче, никто никуда не проваливается и не вылетает. Все живы-здоровы. Чета я смотрю яша с гошей всех юных сеошников на районе так запугали, что те без разрешения уже пукнуть боятся. прискорбно

Обрезать содержимое блока, если оно выходит за его пределы

Author24 — интернет-сервис помощи студентам

Выручайте! Есть блок div , выглядит как полоса, положение и размеры прописаны в css. Как можно отобразить его , к примеру на 63%? Желательно используя css.

P.S значение % находится в js, но насколько я знаю, с его помощью можно изменять css, но это уже другая тема.

Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

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

При изменении масштаб текст выходит за пределы блока
Вот есть три дива меню текст по центру и фотка!! При увиличении зума браузере текст тот что по.

Содержимое вылезает за пределы блока
Имеется родительский блок, в котором назначено position:relative. В нем размещены два других с.

Div выходит за пределы родительского блока при масштабировании (+скрин)
Есть внешний div (outer-outer), первый внутренний (outer), второй внутренний (inner) и внутри него.

Как обрезать див под углом с одной стороны?

DvY0K.png

Есть блок, который с одной стороны обрезан под углом, при этом у данного блока, есть border-radius

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

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

1 комментарий

Простой 1 комментарий

SmthTo

Rustam Bainazarov @SmthTo Куратор тега CSS

Так сделать на CSS нормально нельзя. Вам нужен SVG. Относительно жесткие габариты, к сожалению, останутся.

Решения вопроса 0
Ответы на вопрос 1

ArsenyMatytsyn

Арсений Матыцин @ArsenyMatytsyn Куратор тега CSS
Руководитель frontend направления, предприниматель

Боюсь в глобальном смысле, оно не сильно поможет.

Как обрезать элемент на 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 сторона остаётся без изменений, но вылезающий текст обрезается */ >

CSS свойство clip

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

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

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