Justifier le texte dans une zone de texte HTML / XHTML

Question

J'essaie actuellement de justifier le texte dans une zone de texte, malheureusement, le CSS:

text-align: justify;

Ne fonctionne pas sur le texte, comme centre, à gauche et à droite. J'ai essayé cela à la fois dans Firefox 3 et IE 7 sans succès.

Y at-il un moyen de contourner cela?

Answer 1

Je ne pense pas que cela soit possible dans l’élément html textarea. vous pourrez peut-être utiliser une sorte d’éditeur wysiwyg (div éditable). c'est à dire. fckeditor

Answer 2

J'ai traité le même problème et découvert une solution très stupide. Assurez-vous que le texte à afficher se situe entre les éléments de balises de début et de fin dans la même ligne et non dans la ligne suivante

<textarea  name="description" readonly="readonly" rows="4" cols="66">Text aligned toward left</textarea>

et pas comme

<textarea  name="description" readonly="readonly" rows="4" cols="66">
Text aligned toward left
</textarea>

Answer 3

En fonction de votre navigateur cible ... cette solution fonctionne sous Chrome. Cela ne fonctionne pas dans Firefox cependant ... mais je le posterai quand même.

Outre la définition de text-align: justifier, vous devez également définir white-space: normal.

    textarea {
        text-align: justify;
        white-space: normal;
    }

JSFIDDLE: http://jsfiddle.net/cb5JN/

Answer 4

Je pense que la pratique courante consiste à utiliser le TEXTAREA pour la saisie sans s'inquiéter de la justification; puis, une fois que l'entrée est traitée (c'est-à-dire que le FORM est soumis ou qu'un événement du TEXTAREA est capturé), le contenu est affiché dans un élément de texte non modifiable. (tel que P , SPAN , TD ) où l'attribut de style text-align: justifier; sera honoré .

Answer 5

Pour moi (sous Firefox), ce code fonctionne parfaitement:

textarea{
    resize: none;
    text-align: justify;
    white-space: pre-line;
    -moz-text-align-last: left;
    text-align-last: left;
}

Answer 6

L’utilisation d’un div commun avec contenteditable = & true; & ; a fonctionné dans mon cas. Ne fonctionne pas pour la plupart des navigateurs mobiles cependant.

<div contenteditable="true">Some content</div>

Answer 7

Cela fonctionne bien sous Chrome, mais pas sous IE.

text-align: justifier; espace blanc: normal;