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

Это правильное поведение. 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;
}

Для этого я создал два 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>

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

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

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

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

  border: 1px solid green;
}

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

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

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

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

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

}

Я тоже столкнулся с этой проблемой, и мне не нравится, как она работает. Каким бы большим ни был кот, между ним и коробкой всегда будет прокладка! Поэтому при использовании 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.. */
}

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

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

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

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