Как я могу заставить переполнение: скрытый, чтобы не использовать мое пространство справа

У меня есть следующий код:

<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

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