HTML / XHTML TextAreaでテキストを揃える

StackOverflow https://stackoverflow.com/questions/427039

質問

私は現在、テキストエリア、残念ながらCSSのテキストを正当化しようとしています：

text-align: justify;

テキストは中央、左、右のように機能しません。 Firefox 3とIE 7の両方でこれを試してみましたが、うまくいきませんでした。

これを回避する方法はありますか？

役に立ちましたか？

解決

iは、これがhtml textarea要素で可能だとは思わない。何らかのwysiwygエディター（編集可能なdiv）を使用できる場合があります。すなわち。 fckeditor

他のヒント

私は同じ問題に対処し、非常に愚かな解決策を見つけました。表示するテキストが、次の行ではなく、同じ行の開始タグ要素と終了タグ要素内にあることを確認します

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

そして好きではない

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

ターゲットブラウザに依存します...このソリューションはChromeで動作します。ただし、Firefoxでは動作しませんが、とにかく投稿します。

text-align：justifyの設定に加えて、white-space：normalも設定する必要があります。

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

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

一般的な慣行は、正当化を心配することなく、入力に TEXTAREA を使用することだと思います。そして、入力が処理されると（つまり、 FORM が送信されるか、 TEXTAREA のイベントがキャプチャされる）、コンテンツは編集不可能なテキスト要素で表示されます（ P 、 SPAN 、 TD など）ここで、 text-align：justify; スタイル属性が優先されます。

私にとって（Firefoxの場合）、このコードは完璧に機能します：

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

一般的な divをcontenteditable =＆quot; true＆quot; で使用すると、私の場合はうまくいきました。ただし、ほとんどのモバイルブラウザでは機能しません。

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

Chromeでは正常に動作しますが、IEでは動作しません。

text-align：justify; 空白：通常;

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top