Как я могу заставить переполнение: скрытый, чтобы не использовать мое пространство справа
У меня есть следующий код:
<div style="width: 100px;
overflow: hidden;
border: 1px solid red;
background-color: #c0c0c0;
padding-right: 20px;
">
2222222222222222222222111111111111111111111111113333333333333333333</div>
(переход XHTML 1.0)
Что происходит, так это то, что padding-right не появляется, оно занято содержимым, что означает, что переполнение использует правое пространство заполнения и только "отключается" после заполнения.
Есть ли способ заставить браузер переполняться перед прописью справа, что означает, что мой div будет отображаться с правом заполнения?
То, что я получаю, является первым div в следующем изображении, я хочу что-то вроде второго div:
image
Ответы
Ответ 1
У меня такая же проблема с переполнением: hidden; подчиняясь всем правилам заполнения, за исключением правой стороны. Это решение работает для браузеров, которые поддерживают независимую непрозрачность.
Я только что изменил свой CSS:
padding: 20px;
overflow: hidden;
к
padding: 20px 0 20px 20px;
border-right: solid 20px rgba(0, 0, 0, 0);
Наличие контейнеров divs отлично работает, но эффективно удваивает количество div на странице, что кажется ненужным.
К сожалению, в вашем случае это не будет работать так хорошо, как вам нужна реальная граница на div.
Ответ 2
Лучше всего использовать обертку div и установить для нее дополнение.
Ответ 3
У меня была аналогичная проблема, которую я решил с помощью clip
вместо overflow
. Это позволяет указать прямоугольные размеры видимой области вашего div (Рекомендация W3C). В этом случае вы должны указать только видимую область в пределах прокладки.
Это не может быть идеальным решением для этого точного случая: поскольку граница div находится за пределами области отсечения, это тоже станет невидимым. Я обошел это, добавив div обертки и установив границу на нем, но поскольку внутренний div должен быть абсолютно позиционирован для применения clip
, вам нужно знать и задавать высоту на обертке div.
<div style="border: 1px solid red;
height: 40px;">
<div style="position: absolute;
width: 100px;
background-color: #c0c0c0;
padding-right: 20px;
clip: rect(auto, 80px, auto, auto);">
2222222222222222222222111111111111111111111111113333333333333333333</div>
</div>
Ответ 4
Оберните div и примените дополнение к родительскому
.c1 {
width: 200px;
border: 1px solid red;
background-color: #c0c0c0;
padding-right: 50px;
}
.c1 > .c1-inner {
overflow: hidden;
}
<div class="c1">
<div class="c1-inner">2222222222222222222222111111111111111111111111113333333333333333333
</div>
</div>
Ответ 5
Если у вас есть правый соседний элемент для данного вопроса, поместите его слева. Таким образом, содержимое из левого элемента будет течь до нуля, но не за его пределами, а левое заполнение справа смежного элемента создаст желаемое разделение. Вы можете использовать этот трюк для серии горизонтальных элементов, которые могут иметь контент, который необходимо отрезать, потому что он слишком длинный.