javascript - div - overflow image css
Desbordamiento css oculto aumenta la altura del contenedor. (4)
Déjame explicarte por qué esto está sucediendo.
De acuerdo con las especificaciones de CSS 2.1 ,
La línea de base de un ''bloque en línea'' es la línea de base de su último cuadro de línea en el flujo normal, a menos que no tenga cuadros de línea en el flujo o si su propiedad de ''desbordamiento'' tiene un valor computado que no sea ''visible'', en en cuyo caso la línea de base es el borde del margen inferior.
Para explicar en palabras sencillas,
i) Si el bloque en línea en cuestión tiene su propiedad de desbordamiento configurada como visible (lo cual es predeterminado, no es necesario establecerlo). Entonces, su línea de base sería la línea de base del bloque que contiene la línea. ii) Si el bloque en línea en cuestión tiene su propiedad de desbordamiento configurada en OTRAS DE LAS visibles. Entonces su margen inferior estaría en la línea de base de la línea que contiene el cuadro.
Por lo tanto, en su caso, la cell bloque en línea tiene un overflow:hidden (no VISIBLE), por lo que su margen inferior, el borde de la cell encuentra en la línea de base del contenedor del elemento container .
Es por eso que la cell del elemento se ve empujada hacia arriba y la altura del container parece aumentada. Puedes evitar eso configurando la cell para display:block .
Por favor, eche un vistazo a este violín - http://jsfiddle.net/Z27hC/
var container = document.createElement(''span'');
container.style.display = ''inline-block'';
container.style.marginTop = ''10px'';
container.style.marginLeft = ''50px'';
container.style.background = ''lightblue'';
document.body.appendChild(container);
var cell = document.createElement(''span'');
cell.style.display = ''inline-block'';
cell.style.border = '' 2px solid black'';
cell.style.width = ''200px'';
cell.style.height = ''16px'';
cell.style.overflow = ''hidden'';
container.appendChild(cell);
var text_node = document.createTextNode(''hallo'');
cell.appendChild(text_node);
Tengo un contenedor, que contiene una celda, que contiene un nodo de texto. La celda tiene un ancho fijo.
Si el texto que se pasa al nodo de texto supera el ancho, quiero que se trunque, así que configuro la celda en ''desbordamiento: oculto''.
Funciona, pero hace que la altura de la celda aumente en 3px. La celda tiene un borde, pero la altura aumentada aparece debajo del borde, no dentro de él.
Como tengo muchas celdas en un estilo de hoja de cálculo, desordena el diseño.
He probado esto en IE8 y Chrome, con el mismo resultado.
Cualquiera de las siguientes soluciones estaría bien
- evitar que ocurra el aumento de altura
- mantener el aumento de altura dentro de la frontera
- otra forma de truncar el texto
Según lo solicitado, aquí hay un nuevo violín que muestra un ejemplo más completo.
http://jsfiddle.net/frankmillman/fA3wy/
Espero que sea autoexplicativo. Déjame saber si necesitas algo explicado con más detalle.
Aquí está (con suerte) mi último violín -
http://jsfiddle.net/frankmillman/RZQQ8/
Incorpora ideas de todos los que responden, y ahora funciona como quiero.
Hay dos cambios principales.
El primero fue inspirado por la solución de mesa de Mathias. En lugar de un contenedor intermedio, que contiene una fila en blanco y una fila de datos, uno de los cuales estaba oculto y el que se muestra, ahora solo tengo filas en blanco y de datos alternas en el contenedor de nivel superior. No creo que haya afectado mi problema de diseño, pero eliminó una capa y simplificó el código.
El segundo cambio, sugerido por todos los que respondieron, en realidad solucionó el problema. En lugar de tener elementos del tipo ''span'' con pantalla ''inline-block'', ahora uso ''div'', y una mezcla cuidadosa de ''float left'' y ''float right'' para lograr el diseño que quiero.
Muchas gracias a todos.
La propiedad de desbordamiento puede cambiar la línea de base de un elemento. Para evitar esto, puede usar la alineación vertical en los bloques en línea.
cell.style.display = ''inline-block'';
cell.style.overflow = ''hidden'';
cell.style.verticalAlign = ''bottom'';
Usa el ''bloque'' dsiplay de la celda.
cell.style.display = ''block'';
y
cell.style.float= ''left'';
para alinear a la izquierda si quieres alinear