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 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!¿Justifica la última línea de un div?
es un método multi-navegador que funciona en IE6 + Aquí
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 usted tiene una línea de texto, usar esto para evitar que la línea en blanco de la CSS anterior hará que
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/
Este es un truco impresionante. Debo admitir que me siento un poco hacky utilizándolo, pero un truco tan ingenioso, definitivamente está en mi arsenal. PD - Me encontré con otro escenario hoy (el mismo día en que encontré esto) donde esto fue útil. Estoy usando un 'dl' y resulta que el formato' 'dd's break '' vacío (que tiene una altura de 0) y, por supuesto, un' .' oculto hizo el truco. – Anthony
Esto es ** NO ** una solución entre navegadores. Funciona solo en navegadores basados en Gecko y en IE. –
Esto acaba de funcionar en Chrome para mí. – dievardump
Hay una CSS3 IE 5.5/6 (gracias, CSS3.com, NO!) Propiedad llamada text-justify que puede hacer lo que quiera con:
text-justify: distribute-all-lines;
No está seguro acerca de la compatibilidad del navegador. ¡Qué timo!
CSS3 ofrece una solución para esto en la forma de text-align-last, ver http://www.w3.org/TR/2010/WD-css3-text-20101005/#text-align-last
Esto funciona solo cuando el texto en un div está * totalmente * justificado. «Esta propiedad describe cómo la última línea de un bloque o una línea justo antes de un salto de línea forzado se alinea cuando 'text-align' se establece en 'justify'». Esto es útil cuando quiere que la última línea esté alineada a la izquierda oa la derecha, y todo el texto esté justificado. – Donovan
Al leer la pregunta, veo "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". - dado que normalmente todo el div está alineado a la izquierda, hice la suposición aquí, el lector quiso decir que, normalmente, al justificar un DIV, la última línea se alinea a la izquierda en lugar de estar justificada. En ese caso, 'text-align-last' parece ser la herramienta menos invasiva para usar. – kander
Desafortunadamente esto no es compatible con Safari. – Gavin
Digamos que estoy trabajando con divs que "por alguna razón" (hay una buena razón) sólo puede tener uno línea .... y quiero justificarlos.
¿Por qué no usa 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 solo funciona en IE 5.5 e IE 6.
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 pseudoclase :after, por lo que no funcionará allí.
Si necesita soporte para IE7, probablemente funcionaría pegar el " ___" dentro de un span extraño al final del div (¿usar JS?).
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>
Por desgracia, parece que tiene la div una línea más alto de lo que debe ser .
¡Pensamiento impresionante! Desafortunadamente, crea demasiados errores para lo que estoy haciendo, ¡pero todavía me gusta el trabajo duro! Me atengo a JS y al 'espaciado de palabras', es lo mejor que puedo hacer – JCOC611
Si se te ocurre algo reutilizable usando JS y 'espaciado de palabras ', deberías publicarlo aquí. No pude encontrar una mejor solución en los internets que la que publiqué aquí. – thirtydot
Este método funcionó para mí:
Este truco se llama "Ben Justificación" *
Bueno, no es exactamente todo con CSS, es necesario agregar un poco más para el 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 desencadena la justificación de la línea iniciando una nueva línea. El contenido adicional (<span> </span>) se fuerza a una nueva línea porque el espacio se hace de 1000 píxeles de ancho (con separación de palabras) y se trata 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 del dentro del lapso y estableciendo 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 esta partida 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 demuestra que esta técnica se ha publicado con anterioridad, por la presente nombro esta técnica "Ben Justificación" y declaro libre para todos usar.
Ben Clay, enero de 2010.
Fuente: http://www.evolutioncomputing.co.uk/technical-1001.html
hack muy interesante. –
Tuve un problema donde algunos de las respuestas anteriores funcionaron, pero agregaron una nueva línea visible en la parte inferior, lo cual era inaceptable, porque la caja tenía un color de fondo. Fijé la justificación con el código de abajo:
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>
Cuando el DOCTYPE es HTML5, Kristin y soluciones de Jacqui causa un salto de línea extra, que es! difícil de eliminar Si te molesta (como yo), aquí es 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 sólo de texto de una sola línea, y requiere modificación del contenido como se muestra arriba, que no es siempre factible/práctico. Pero hay algunas situaciones cuando esto es no hay 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.
Si a la etiqueta div de cierre le sigue un salto de línea o si la etiqueta div utiliza un relleno/margen de fondo equivalente, puede simplemente reemplazar esto con una línea invisible final de espacios no disruptivos como este:
<div>This last line is now for all intents and purposes justified </div>
Si bien esto puede no ser la solución más bonita, es probablemente la solución más segura entre navegadores, ya que no se basa en ningún tipo de pellizco 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, bien, puedo dar mi propia razón de ser 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 estoy al tanto de ninguna solución automatizada que también sea compatible con varios navegadores, pero agregar un montón de espacios sin interrupciones hace el trabajo para mí al menos ...
A pesar de que usted indica el por qué no es importante, estoy Todavía tengo curiosidad sobre eso. – kander
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. – JCOC611
Sí, son 618px – JCOC611