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

Question

Я ожидал, что заполнение внутри div останется свободным от любого текста. Но с учетом следующего html / css контент-текст выливается в отступы;

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

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

Текст переполняет его размер в 50px и в отступы 10px. Это по замыслу? Если так, то это выглядит довольно глупо - отступы не дополняют, если в них есть что-то! Или я просто что-то делаю не так?

С уважением, CSS новичок.

Answer 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;
}

Answer 2

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

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

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

  border: 1px solid green;
}

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

Answer 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>

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

Answer 4

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

Answer 5

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

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

<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.. */
}

Answer 6

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

Если есть какие-либо элементы, которые появляются справа от 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;

}