CSS: czy to prawda, że zawartość tekstowa div przelewa się do wypełnienia?

To dlatego, że ograniczyłeś szerokość div do 50px, powodując, że tekst rozlewa się do wypełnienia. Usuń tę instrukcję width, a div rozszerzy się i zmniejszy się o rozmiar txt w nim.

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

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

  border: 1px solid green;
}

Aby to zrobić, stworzyłem dwa divy: jeden główny i jeden wrapper. Skończyło się na zdefiniowaniu wysokości dla wewnętrznego głównego div I ukrywaniu przepełnienia, i to rozwiązało problem. Oto kod:

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>

Owijka ma wyściółkę i obramowanie (wśród innych atrybutów). Główny ma atrybut wysokości i przepełnienia - to te, które rozwiązują problem. Nie krępuj się przetestować, a zobaczysz, że bez względu na to, ile słów zostanie dodanych do głównego div, nie będą one wyświetlane częściowo lub w wszystkie. Przeglądarka też.

Jedyny sposób, w jaki to działa, to pozbycie się szerokości: 50px...poza tym się potknąłem!?

Innym podejściem jest użycie prawa konturu jako pseudo-wypełnienia. Najpierw zmniejsz szerokość swojego elementu o 10px (aby uwzględnić dodatkową kwotę, którą kontur rozszerzy się). Następnie dodaj stały czerwony kontur 10px-prawo do elementu. Zarys obejmie każdy "ukryty" tekst.

Jeśli są jakieś elementy, które pojawiają się po prawej stronie foo, pamiętaj, aby dodać 10px do prawego marginesu (ponieważ obrys nie przesunie ich na bok, jak normalne rozszerzenie szerokości).

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

}

Właśnie natknąłem się na ten problem, jak również i nie podoba się sposób, w jaki to działa. Bez względu na to, jak duży jest kot, wyściółka zawsze będzie między nim a pudełkiem! Dlatego podczas używania overflow: hidden zawartość powinna być ukryta, gdy dotrze do wypełnienia.

Oto hack, który nie działa w przypadku, gdy chcesz obramowanie, ale może dla niektórych (mnie): użyj obramowania jako wypełnienia.

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