Come posso forzare overflow: hidden per non uso il mio spazio padding-right

Question

Ho il seguente codice:

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

(XHTML 1.0 di transizione)

Quello che succede è che il padding-right doesn Appare, è occupato dal contenuto, il che significa che l'overflow utilizza lo spazio destro del padding e solo "taglia fuori" dopo il padding.

C'è un modo per forzare l'overflow del browser prima del padding-right, il che significa che il div sarà mostrato con il padding giusto?

quello che ottengo è il primo div nell'immagine seguente, quello che voglio è qualcosa di simile al 2 ° div:

image

Answer 1

Ho lo stesso problema con l'overflow: nascosto; obbedire a tutte le regole del padding, ad eccezione del lato destro. Questa soluzione funziona per i browser che supportano l'opacità indipendente.

Ho appena cambiato la mia CSS da:

padding: 20px; 
overflow: hidden; 

a

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

Avere div contenitore funziona bene, ma che raddoppia di fatto la quantità di div in una pagina, che si sente inutile.

Sfortunatamente, nel tuo caso questo non funzionerà molto bene, in quanto è necessario un vero bordo sul div.

Answer 2

La cosa migliore è quella di utilizzare un div avvolgimento e impostare l'imbottitura che .

Answer 3

Ho avuto un problema simile che ho risolto utilizzando clip anziché overflow. Ciò consente di specificare le dimensioni rettangolari dell'area visibile del div (W3C Recommendation). In questo caso, è necessario specificare solo l'area all'interno del padding per essere visibile.

Questa potrebbe non essere una soluzione perfetta per questo caso esatto: poiché il bordo del div è esterno all'area di ritaglio, anche questo diventerà invisibile. Mi sono aggirato aggiungendo un div wrapper e impostandone il bordo, ma poiché il div interno deve essere posizionato in modo assoluto per applicare clip, è necessario conoscere e specificare l'altezza sul div wrapper.

<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

Se si dispone di un elemento adiacente a quello in questione, inserire il riempimento alla sua sinistra. In questo modo il contenuto dell'elemento sinistro scorrerà fino a ma non oltre il suo margine e il riempimento sinistro sull'elemento adiacente destro creerà la separazione desiderata. Puoi usare questo trucco per una serie di elementi orizzontali che possono avere contenuti che devono essere tagliati perché troppo lunghi.

Answer 5

Avvolgere il div e applicare imbottitura al genitore

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