Jak mogę zmusić overflow: hidden, aby nie zużywać moja przestrzeń padding-prawy

Question

Mam następujący kod:

<div style="width: 100px; 
overflow: hidden; 
border: 1px solid red; 
background-color: #c0c0c0; 
padding-right: 20px; 
"> 
2222222222222222222222111111111111111111111111113333333333333333333</div> 

(XHTML 1.0 Transitional)

Co się dzieje, że padding-right robi Wygląda na to, że jest zajęty przez treść, co oznacza, że ​​przepełnienie wykorzystuje dopełnienie w prawo i tylko "obcina" po dopełnieniu.

Czy istnieje sposób na wymuszenie przepełnienia przeglądarki przed dopełnieniem, co oznacza, że ​​mój div zostanie wyświetlony z dopełnieniem w prawo?

Co mogę to pierwszy div na poniższym obrazie, co chcę jest coś takiego jak 2 div:

image

Answer 1

Mam taki sam problem z przepełnieniem: ukryty; przestrzeganie wszystkich zasad dopełniania, z wyjątkiem prawej strony. To rozwiązanie działa w przeglądarkach obsługujących niezależne krycie.

Właśnie zmienił się mój CSS od:

padding: 20px; 
overflow: hidden; 

do

padding: 20px 0 20px 20px; 
border-right: solid 20px rgba(0, 0, 0, 0); 

Mając div kontenerów działa dobrze, ale że skutecznie podwaja ilość div na stronie, która czuje się niepotrzebna.

Niestety, w twoim przypadku to nie zadziała tak dobrze, ponieważ potrzebujesz prawdziwej granicy na div.

Answer 2

Najprościej jest użyć div owijania i ustawić padding na tym .

Answer 3

Miałem podobny problem, który rozwiązałem, używając clip zamiast overflow. Pozwala to określić prostokątne wymiary widocznego obszaru div (W3C Recommendation). W takim przypadku należy określić tylko obszar w obrębie dopełnienia, aby był widoczny.

Może to nie być idealne rozwiązanie w tym przypadku: ponieważ granica div znajduje się poza obszarem obcinania, stanie się niewidoczna. Mam wokół tego, dodając wrapper div i ustawienie granicy na tym, ale ponieważ wewnętrzny div musi być absolutnie ustawiony, aby clip do zastosowania, musisz znać i określić wysokość na opakowaniu 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> 

Answer 4

Jeśli masz prawo do sąsiedniego elementu do danego, po lewej stronie umieść wyściółkę. W ten sposób zawartość lewego elementu przepłynie w górę, ale nie przekroczy jej marginesu, a lewy margines na prawym sąsiadującym elemencie stworzy pożądaną separację. Możesz użyć tej sztuczki dla szeregu elementów poziomych, które mogą mieć treść, która musi zostać obcięta, ponieważ jest zbyt długa.

Answer 5

Wrap div i zastosować dopełnienie do rodzica

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