html - notas - texto alinear justificar no funciona

justificar texto en html css

Question

Estoy tratando de justificar el texto dentro de esta etiqueta p para que se ajuste perfectamente al ancho de la p.

<p align="justify" style="text-align: justify !important; color:#fff; margin:0px; font-weight:bold; width:487px; border:Solid 1px red;">blah blah blah</p>

¡Pero el texto no justificará! alguna idea de por qué?

Gracias por cualquier ayuda.

Answer 1

Chrome no lo admite, pero en Firefox e IE, puedes usar text-align-last: justify; . Para una solución de navegador cruzado, tenemos que usar lo que @onemanarmy publicó;)

Answer 2

Mejor prueba

style="text-align:justifty;display:inline-block;"

Answer 3

Puede utilizar la solución descrita aquí: http://blog.vjeux.com/2011/css/css-one-line-justify.html

Esto justificará una sola línea pero agregará un espacio después, así que si conoce la altura, puede especificarla con overflow:hidden para ocultarla y obtener la justificación.

.fulljustify {
     text-align:justify;
    }
    .fulljustify:after {
        content: "";
        display: inline-block;
        width: 100%; 
    }
    #tagline {
        height: 80px;
        overflow: hidden;
        line-height: 80px; /* vert-center */
    }

<p id="tagline" class="fulljustify">Blah blah blah</p>

Answer 4

Si quisiera justificar cuatro palabras en 487px , podría intentar usar word-spacing en su css .

Utilicé word-spacing:8em; para bla bla bla bla pero puede ajustar según sea necesario.

http://jsfiddle.net/5RpQr/1/

Answer 5

Si su texto no abarca más de una línea, justificar no hace nada. Su texto debe ajustarse a la siguiente línea, y luego la primera línea se justificará, pero no la segunda.

Answer 6

Simplemente use style="text-align:justify" .
Funciona en todos los navegadores.

Answer 7

También hay algo similar, como display: flex; justificar-contenido: espacio-alrededor; Si quieres envolver esos textos en spans o divs

Answer 8

prueba esto

para div

div {
text-align:justify;
text-justify: inter-word;
text-align-last:center;
/* for IE9 */
-ms-text-align-last:center;
}