CSS: Правильно ли, что текстовое содержимое div переполняется в дополнение?

Ответ 1

Это правильное поведение. overflow: hidden будет скопировать содержимое, которое выходит за рамки . Прокладка находится внутри коробки, поэтому содержимое будет, если необходимо, переполняться в это пространство.

(источник)

Чтобы получить эффект, к которому вы, похоже, стремились, одно решение обертывает ваш div.foo в другой div и вместо этого устанавливает фон на этом:

<div class="foowrapper">
    <div class="foo">purrrrrrrrr</div>
</div>

.foo {
    overflow: hidden;
    width: 40px;
}
.foowrapper {
    padding-right: 10px
    background: red;
    border: 1px solid green;
}

Ответ 2

Это потому, что вы ограничили ширину div до 50px, заставляя текст разливаться в дополнение. Удалите этот оператор ширины, и div будет расширяться и сжиматься с размером txt внутри него.

<div class="foo">helloworld</div>

.foo {
  float: left;
  overflow: hidden;
  background: red;
  padding-right: 10px;

  border: 1px solid green;
}

Надеюсь, что это поможет.

Ответ 3

Чтобы сделать это, я создал два div: один основной и одну оболочку. Я закончил тем, что определял высоту внутреннего главного div и скрывал переполнение, и это решило проблему. Вот код:

div.wrap {
  padding: 10px 10px 14px 10px;
  border:1px solid #000000;
  width: 200px;
  height: 70px; 
 }
div.main { 
  line-height: 1.3em;
  overflow:hidden; 
  width: 200px;
  height: 60px; /* PLAY WITH THE HEIGHT so that you can essentially use it to cover up the overflow */
 }

  <div class="wrap"><div class="main">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor labore et dolore magna aliqua. Ut enim ad minim veniam.</div></div>

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

Ответ 4

Единственный способ, которым я мог видеть эту работу, - избавиться от ширины: 50px... кроме того, что я был в тупике!?

Ответ 5

Другой подход - использовать контур-право как псевдо-прописку. Сначала уменьшите ширину вашего элемента на 10 пикселей (чтобы учесть дополнительную сумму, которую простирается контур). Затем добавьте сплошной красный контур 10px - прямо к вашему элементу. Контур будет охватывать любой "скрытый" текст.

Если есть какие-либо элементы, которые отображаются справа от foo, обязательно добавьте 10px к своему правому краю (поскольку контур не будет отбрасывать их в сторону, как это делает расширение обычной ширины).

.foo {
  float: left;
  overflow: hidden;
  background: red;
  padding-right: 10px;
  width: 40px;
  border: 1px solid green;
  outline-right: 10px solid red;
  margin-right: 10px;

}

Ответ 6

Я просто столкнулся с этой проблемой, и мне не нравится, как она работает. Независимо от того, насколько велика кошка, прокладка всегда будет между ней и коробкой! Поэтому при использовании переполнения: скрытый контент должен быть скрыт, когда он достигнет заполнения.

Вот хак, который не работает, если вы хотите получить границу, но можете для некоторых (меня): используйте границы в качестве дополнения.

<div class="foo">helloworld</div>

.foo {
  float: left;
  overflow: hidden;
  background: red;
  padding-right: 0; /* Removed the padding. */
  width: 50px;
  border-right: 10px solid red; /* 10px, background color or transparent. */
  box-sizing: border-box; /* I prefer this one too.. */
}

Ответ 7

Это сделано специально, так как overflow: hidden использует границу в качестве клипа, поэтому содержимое будет перетекать в отступ.

Здесь вы можете использовать тень блока того же цвета, что и фон, чтобы создать поддельные отступы, в которые текст не попадет.

box-shadow: 0px 0px 0px 5px black;

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