CSS: ¿Es correcto que el contenido de texto de un div se desborde en el relleno?

Question

Esperaba que el relleno dentro de un div permaneciera libre de cualquier texto. Pero dado el siguiente html/css, el contenido-texto se expande en el relleno;

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

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

El texto desborda es 50px tamaño y en el relleno de 10px. ¿Es eso por diseño? Si es así, parece bastante tonto: el relleno no es relleno si tiene cosas en él. ¿O solo estoy haciendo algo mal?

Saludos, CSS novato.

Answer 1

Este es el comportamiento correcto. overflow: hidden clip contenido que se extiende fuera de la casilla . El relleno es dentro de la caja, por lo que el contenido se desbordará felizmente en ese espacio si es necesario.

(source)

Para obtener el efecto que parece estar apuntando, una solución es envolver su div.foo otra en un div y configurar el fondo en que una vez, así:

<div class="foowrapper"> 
    <div class="foo">purrrrrrrrr</div> 
</div> 

.foo { 
    overflow: hidden; 
    width: 40px; 
} 
.foowrapper { 
    padding-right: 10px 
    background: red; 
    border: 1px solid green; 
} 

Answer 2

Es porque usted ha limitado el ancho de la div a 50 px causando el texto a derramarse en el relleno. Quite esa declaración de ancho y el div se expandirá y contraerá con el tamaño del txt dentro de él.

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

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

    border: 1px solid green; 
} 

Espero que te ayude.

Answer 3

La única manera de que pudiera ver este trabajo es mediante la eliminación de la anchura: 50px ... aparte de eso, confundido !?

Answer 4

Para ello, he creado dos divs: uno principal, y una envoltura. Terminé definiendo una altura para el div principal interior y el desbordamiento oculto, y resolvió el problema. Aquí está el código:

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> 

El envoltorio tiene el relleno y el borde (entre otros atributos). El principal tiene un atributo de altura y desbordamiento: estos son los que resuelven el problema. No dude en probar y verá que no importa cuántas palabras se agreguen a la div principal, no se mostrarán parcialmente, o no se mostrarán en absoluto. Cross-browser, también.

Answer 5

Otro enfoque es utilizar un esquema de derecha como un pseudo-relleno. Primero, reduzca el ancho de su elemento en 10px (para tener en cuenta el monto adicional, el contorno se extenderá). A continuación, agregue un contorno rojo sólido de 10 píxeles a la derecha de su elemento. El esquema cubrirá cualquier texto 'oculto'.

Si hay elementos que aparecen a la derecha de foo, asegúrese de agregar 10px a su margen derecho (porque el contorno no los empujará a un lado como lo haría una extensión de ancho normal).

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

} 

Answer 6

Acabo de toparme con este problema y no me gusta la forma en que funciona. No importa qué tan grande sea el gato, ¡el relleno siempre estará entre él y la caja! Por lo tanto, cuando se utiliza el desbordamiento: oculto, el contenido debe ocultarse cuando alcanza el relleno.

Aquí hay un truco que no funciona en el caso de que quiera una frontera, pero por alguna fuerza (yo): El uso de las fronteras como relleno.

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