Выровнять текст в HTML / XHTML TextArea

В настоящее время я пытаюсь выровнять текст в текстовом поле, к сожалению, CSS:

text-align: justify;

Не работает с текстом, например, по центру, слева и справа. Я пробовал это как в Firefox 3, так и в IE 7, но безуспешно.

Есть ли способ обойти это?


html css text-alignment textarea justify
person Matt    schedule 09.01.2009    source источник

Ответы (7)


arrow_upward
0
arrow_downward

Я не думаю, что это возможно в элементе html textarea. вы могли бы использовать какой-то редактор wysiwyg (редактируемый div). т.е. ублюдок

person John Boker    schedule 09.01.2009
comment
Это то, что я нашел, просматривая результаты поиска Google, просто надеясь, что кто-то здесь может знать что-то, что я мог пропустить. Спасибо. - person Matt; 09.01.2009
comment
См. Также этот ответ. - person Paolo Gibellini; 29.02.2016

arrow_upward
22
arrow_downward

Я столкнулся с той же проблемой и нашел очень глупое решение. Убедитесь, что отображаемый текст попадает в элементы начального и конечного тегов в одной строке, а не в следующей строке.

<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>
person shweta    schedule 09.03.2011
comment
Есть такая проблема с ‹textarea› - person ArBR; 22.06.2011
comment
очень странно, как это работает, когда весь код текстового поля находится в одной строке! ужасно отлаживать! спасибо репутация ++ - person cwiggo; 30.04.2013
comment
дорогие друзья ... вы проверяли это перед тем, как комментировать !!! У меня не работает в HTML5 - person Mahdi Jazini; 25.12.2016

arrow_upward
17
arrow_downward

В зависимости от вашего целевого браузера ... это решение работает в Chrome. Однако в Firefox это не работает ... но я все равно выложу его.

Помимо установки text-align: justify, вы также должны установить white-space: normal.

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

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

person Norman Breau    schedule 13.01.2014
comment
Однако добавление white-space: normal заставляет IE вставлять пробелы вместо новых строк при нажатии клавиши ВВОД! - person m6k; 01.08.2014
comment
Чтобы разрешить отображение новых строк, вы должны использовать white-space: pre-line;. См. Также здесь. - person Paolo Gibellini; 08.03.2016
comment
Теперь он работает и без свойства white-space. - person tibotka; 30.11.2020

arrow_upward
2
arrow_downward

Я считаю, что обычной практикой является использование TEXTAREA для ввода, не беспокоясь об обосновании; а затем, как только ввод обработан (т.е. отправлено FORM или зафиксировано событие TEXTAREA), содержимое отображается в нередактируемом текстовом элементе (таком как P, SPAN, TD), где атрибут стиля text-align: justify; будет удостоен чести.

person Ken Paul    schedule 09.01.2009
comment
Я согласен, но клиент хочет, чтобы это было частью дизайна, поэтому, к сожалению, это не подходит для ситуации. Спасибо хоть. - person Matt; 09.01.2009
comment
Тогда я думаю, что простой ответ - НЕТ. Поиск в Google по выравниванию текстового поля показывает множество похожих вопросов без какого-либо полезного решения, за исключением, возможно, замены TEXTAREA виджетом Rich Text. - person Ken Paul; 09.01.2009
comment
Это то, что я придумал, прежде чем, к сожалению, спросить здесь. Спасибо за вашу помощь. - person Matt; 11.01.2009

arrow_upward
2
arrow_downward

Для меня (в Firefox) этот код отлично работает:

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

arrow_upward
1
arrow_downward

В моем случае сработало использование обычного div с contenteditable = "true". Однако не работает для большинства мобильных браузеров.

<div contenteditable="true">Some content</div>
person Edo    schedule 28.02.2012

arrow_upward
0
arrow_downward

Он отлично работает в Chrome, но не в IE.

выравнивание текста: выравнивание; пробел: нормальный;

person brunoguarato    schedule 13.11.2014