Al usar CSS overflow: hidden, a menudo he encontrado que la última línea de texto se corta parcialmente. ¿Hay alguna manera de evitar esto para que las líneas parciales no aparezcan? Casi como una envoltura de palabras vertical.CSS: ¿Puede evitar el desbordamiento: oculto para cortar la última línea de texto?
Rob es correcto. Estaba haciendo un div que tenía una altura máxima de 11em y la última línea de texto de desbordamiento solo estaba a la mitad. espacio en blanco: nowrap solo elimina la última línea todos juntos.
me trataron
white-space: nowrap;
y Gaby también es cierto que esto causa problemas también.
Lo mejor que se me ocurrió fue que jugar con la altura de la línea-altura y div hasta que las líneas de menor cantidad fueron de corte
esto solo funciona porque su última línea fue producida por un envoltorio de línea larga. Si hubiera un
en él, aún se mostraría parcialmente ... Debe asegurarse de que la 'altura' del div se puede dividir exactamente por su 'altura de línea' .. –
Tiene sentido. Hice la altura del div algo así como 11em. ¿Eso haría alguna diferencia? –
Esta solución funcionó para mí: https://stackoverflow.com/a/17413577/2540428 esencialmente crear un div contenedor con el relleno adecuado y coloca el contenido en el div principal donde editas su altura y ocultas el desbordamiento. Ver enlace para más detalles.
Puede utilizar div envoltorio y css de varias columnas: ejemplo
.wrapper {
-webkit-column-width: 150px; //You can't use 100%
column-width: 150px;
height: 100%;
}
Solución:http://jsfiddle.net/4Fpq2/9/
actualización 2017-09-21
En Firefox esta solución sigue funcionando pero roto en Chrome. Recientemente, Chrome comenzó a dividir la columna por partes pequeñas, también detiene el contenido de corte si configura la altura. En este ejemplo http://jsfiddle.net/4Fpq2/446/, cambio de altura a altura máxima y muestro un comportamiento extraño de Chrome. Si tiene ideas, escriba en los comentarios.
Funciona para mí. :) Sin embargo, no puedo hacer que funcione con 'text-overflow: ellipsis'. ¿Es eso posible? –
En este método, no hay desbordamiento. Por lo tanto, el desbordamiento de texto: puntos suspensivos no funcionarán. Las regiones CSS pueden ayudar pero: http://caniuse.com/#feat=css-regions :( – stalkerg
Lástima que esto no funciona con el 100% :( – Swen
Existen dos propiedades css3. 1) salto de palabra & 2) word-arap
No olvide que se trata de una nueva propiedad que es css3. Para que los navegadores antiguos no admitan dicha propiedad.
.class-name {word-break: break-all;}
.class-name {word-wrap: break-word;}
[No funciona] (http://jsfiddle.net/8takLekq/) en IE, Chrome o Firefox. –
Una vez que entienda cómo el column-width trabajo, la respuesta de @ stalkerg hace mucho sentido.
El column-width divide el contenido en columnas, por lo que la última línea del texto no cabría, se moverá a la siguiente columna. Ahora el truco es hacer que el ancho de la columna sea tan ancho como el contenedor. El contenedor tiene desbordamiento: oculto, por lo que la 2da columna no mostrará.
.box {
width: 200px;
}
.container {
-webkit-column-width: 200vw;
-moz-column-width: 200vw;
column-width: 200vw;
height: 100%;
}
simplemente agregue el atributo width-width y configure el ancho del contenedor, funcionará.
que funcionó para mí:
.wrapper_container{
width: 300px;
height: 200px;
overflow: hidden;
}
.wrapper{
-webkit-column-width: 300px;
column-width: 300px;
height: 100%;
}
dar un ejemplo? tal vez meterse con la altura de la línea en el último elemento. –
Quiere decir que el contenido se corta en la mitad de la línea, por lo que se muestra la mitad superior de los caracteres, pero no la parte inferior.AFAIK no hay ninguna solución para esto, aparte de atornillar con la altura de la línea (que de todos modos no sería una solución de navegador cruzado) – Rob
¿Por qué estás usando overflow? para contener flotadores? ¿o realmente necesitas ocultar cosas desbordantes? –