¿Cómo puedo forzar overflow: hidden al no uso mi espacio padding-right

Question

he el siguiente código:

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

(XHTML 1.0 transitorio)

Lo que sucede es que el padding-right doesn 't aparece, está ocupado por el contenido, lo que significa que el desbordamiento utiliza el espacio de relleno derecho y solo "corta" después del relleno.

¿Hay alguna manera de forzar al navegador a desbordarse antes del relleno-derecho, lo que significa que mi div se mostrará con el relleno correcto?

Lo que se ve es la primera div en la siguiente imagen, lo que quiero es algo así como el segundo div:

image

Answer 1

Tengo el mismo problema con el desbordamiento: oculto; obedeciendo todas las reglas de relleno, excepto el lado derecho. Esta solución funciona para navegadores compatibles con opacidad independiente.

Acabo de cambiar mi CSS a partir de:

padding: 20px; 
overflow: hidden; 

a

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

Tener DIV contenedor funciona bien, pero que duplica la cantidad de divs en una página, que se siente innecesario.

Desafortunadamente, en su caso esto no funcionará tan bien, ya que necesita un borde real en el div.

Answer 2

Su mejor opción es utilizar un div envolver y fijar el relleno en ese .

Answer 3

Tuve un problema similar que resolví usando clip en lugar de overflow. Esto le permite especificar las dimensiones rectangulares del área visible de su div (W3C Recommendation). En este caso, debe especificar solo el área dentro del relleno para que sea visible.

Esto puede no ser la solución perfecta para este caso exacto: como el borde del div está fuera del área de recorte, también será invisible. Lo solucioné agregando un divisor envoltorio y estableciendo el borde en eso, pero dado que el divisor interior debe estar absolutamente posicionado para que se aplique clip, necesitarías saber y especificar la altura en el divisor envoltorio.

<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

Si tiene un elemento adyacente a la derecha en cuestión, coloque el relleno a su izquierda. De esta forma, el contenido del elemento izquierdo fluirá hacia arriba, pero no más allá de su margen, y el relleno izquierdo del elemento adyacente a la derecha creará la separación deseada. Puede utilizar este truco para una serie de elementos horizontales que pueden tener contenido que debe cortarse porque es demasiado largo.

Answer 5

Wrap el div y aplicar el relleno a los padres

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