css - div - table html
¿Justifica la última línea de un div? (9)
Digamos que estoy trabajando con divs que "por alguna razón" (hay una buena razón) solo pueden tener una línea ... y quiero justificarlos.
¿Por qué no usas text-align: justify; ? Justifica cada línea. Incluso si solo hay una línea.
Editar : Creo que estás buscando this , como dijo scragz. De todos modos, esto funciona solo en IE 5.5 e IE 6.
No creo que el "¿por qué?" de esta pregunta es importante ... pero lo que tengo que hacer es text-align:justify la última línea de texto de un DIV . Normalmente, la última línea (o la primera si no hay otras líneas, que es el caso actual) de un div no está justificada, sino alineada a la izquierda. Sé que podría no tener ningún sentido, ¡pero necesito absolutamente que se justifique la última línea!
Aquí hay un método de navegador cruzado que funciona en IE6 +
Combina text-align-last: justify; que es compatible con IE y una variación del método: after pseudo-content. Incluye una solución para eliminar el espacio adicional agregado después de los elementos de texto de una línea.
CSS:
p, h1{
text-align: justify;
text-align-last: justify;
}
p:after, h1:after{
content: "";
display: inline-block;
width: 100%;
}
Si tiene una línea de texto, utilícela para evitar que la línea en blanco provoque el CSS anterior.
h1{
text-align: justify;
text-align-last: justify;
height: 1em;
line-height: 1;
}
h1:after{
content: "";
display: inline-block;
width: 100%;
}
Más detalles: http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justify-last-line-paragraph-text/
CSS3 ofrece una solución para esto en forma de text-align-last , consulte http://www.w3.org/TR/2010/WD-css3-text-20101005/#text-align-last
Cuando el! DOCTYPE es HTML5, las soluciones de Kristin y Jacqui causan una nueva línea adicional, que es difícil de eliminar. Si te molesta (como yo), aquí hay otra idea:
<div style="display: flex;">
Lorem <span style="flex:1;"></span>
ipsum <span style="flex:1;"></span>
dolor <span style="flex:1;"></span>
sit...
</div>
Tiene otros inconvenientes: funciona solo para texto de una sola línea y requiere la modificación del contenido como se muestra arriba, lo que no siempre es factible / práctico. Pero hay algunas situaciones en las que esto no es un problema (como en mi caso). Incluso puede ser útil tener control sobre las posiciones donde se insertará el espacio extra. Los estilos están en línea solo por brevedad, por supuesto. Lo probé solo con FFox / IE reciente.
Este es el truco más limpio que pude encontrar / encontrar. Su experiencia puede ser diferente.
Probé mi ejemplo en IE8, Firefox, Chrome, Opera, Safari.
IE7 no implementa la :after pseudoclase, por lo que no funcionará allí.
Si necesita soporte para IE7, probablemente funcionaría colocar el " ___" dentro de un span extraño al final del div (¿usar JS?).
Demostración en vivo ( ver código )
CSS:
div {
width: 618px;
text-align: justify
}
div:after {
content: " __________________________________________________________";
line-height: 0;
visibility: hidden
}
HTML:
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dui dolor, bibendum quis accumsan porttitor, fringilla sed libero. Phasellus felis ante, egestas at adipiscing lobortis, lobortis id mi. Praesent pulvinar dictum purus. Duis rhoncus bibendum vehicula. Vestibulum mollis, metus a consectetur semper, urna enim sollicitudin lacus, vel imperdiet turpis nisl at metus. Integer iaculis pretium dui, a viverra dolor lobortis pellentesque. Aliquam quis felis nec purus semper interdum. Nam ac dolor in sem tincidunt egestas. Ut nisl tortor, laoreet eu vestibulum id, bibendum at ipsum. Maecenas elementum bibendum orci, ac eleifend felis tincidunt in. Fusce elementum lacinia feugiat.
</div>
Desafortunadamente, parece hacer que div una línea más alta de lo que necesita ser.
Este método funcionó para mi:
Este truco se llama "Ben Justificación" *
Bueno, no es todo con CSS, necesitas agregar un poco más al final de la línea. El marcado para el encabezado anterior es ...
<h1 id="banner">
How to justify a single line of text with css<span> </span>
</h1>
La pequeña adición al final de la línea activa la justificación de la línea al comenzar una nueva línea. El contenido adicional ( <span> </span> ) se fuerza en una nueva línea porque el espacio se hace 1000px de ancho (con espaciado de palabras) y es tratado como una palabra La línea adicional no se visualiza porque el tamaño de fuente está establecido en 0px.
Actualización, 23-Ene-11: Acabo de actualizar el marcado para incluir un espacio después de dentro del lapso y establecer el tamaño de fuente en 1px para el lapso: esto es necesario para IE8. Gracias a Mamoun Gadir por señalar los problemas de IE.
El CSS para el encabezado anterior es ...
h1#banner {
border: 1px solid #666;
display: block;
width: 100%;
height: 1em;
font-size: 1em;
line-height: 1em;
margin: 20px auto;
padding: 0px ;
text-align: justify ;
}
h1#banner span {
font-size: 1px ;
word-spacing: 1000px;
}
* A menos que la evidencia demuestre que esta técnica ha sido publicada anteriormente, por este medio le doy a esta técnica el nombre de "Ben Justificación" y la declaro libre para que todos la utilicen.
Ben Clay, enero de 2010.
Fuente: http://www.evolutioncomputing.co.uk/technical-1001.html
Si a la etiqueta div de cierre le sigue un salto de línea o si la etiqueta div hace uso de un relleno / margen inferior equivalente, entonces puede simplemente reemplazar esto con una línea invisible final de espacios sin interrupción como este:
<div>This last line is now for all intents and purposes justified </div>
Si bien esta puede no ser la solución más bonita, es probablemente la solución más segura entre navegadores ya que no depende de ningún tipo de ajuste no estándar. Solo asegúrese de que haya suficientes caracteres "nbsp" para causar siempre un salto de línea mientras se mantiene dentro de un margen seguro del máximo permitido en una sola línea.
En cuanto a por qué uno querría esto, bueno, puedo dar mi propio razonamiento a quien pueda interesarle; hay situaciones en las que desea dividir un bloque de texto continuo o un párrafo de texto para insertar imágenes, tablas o, como en mi caso, notas de pie de página personalizadas justo antes de un salto de página. Si haces eso, entonces quieres que la última línea justo antes del descanso se justifique, ya que el texto se reanudará justo después del salto arbitrario. En mi caso, las notas a pie de página son de longitud variable, así que tengo que ingresarlas manualmente y, por lo tanto, también necesito dividir manualmente el bloque de texto y forzar manualmente la alineación de la última línea antes del salto. No conozco ninguna solución automatizada que también sea compatible con varios navegadores, pero agregar un montón de espacios sin interrupciones hace que el trabajo para mí al menos ...
Tuve un problema en el que funcionaban algunas de las respuestas anteriores, pero agregué una nueva línea visible en la parte inferior, lo cual era inaceptable porque la caja tenía un color de fondo. Arreglé la justificación con el siguiente código:
jQuery:
$(".justify").each(function(index, element) {
var original_height = $(this).height();
$(this).append("<span style=''display: inline-block;visibility: hidden;width:100%;''></span>");
$(this).height(original_height);
});
HTML:
<div class="justify" style="width:100px; background-color:#CCC">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>