Выровнять текст в HTML / XHTML TextArea
В настоящее время я пытаюсь выровнять текст в текстовом поле, к сожалению, CSS:
text-align: justify;
Не работает с текстом, например, по центру, слева и справа. Я пробовал это как в Firefox 3, так и в IE 7, но безуспешно.
Есть ли способ обойти это?
Ответы 7
Я считаю, что обычной практикой является использование TEXTAREA для ввода, не беспокоясь об обосновании; а затем, как только ввод обработан (т.е. отправлен FORM или зафиксировано событие TEXTAREA), содержимое отображается в нередактируемом текстовом элементе (таком как P, SPAN, TD), где атрибут стиля text-align: justify; будет удостоен чести.
Тогда я думаю, что простой ответ - НЕТ. Поиск в Google по запросу «выравнивание текстового поля» показывает множество похожих вопросов без какого-либо полезного решения, за исключением, возможно, замены TEXTAREA виджетом Rich Text.
Это то, что я придумал, прежде чем, к сожалению, спросить здесь. Спасибо за вашу помощь.
Я не думаю, что это возможно в элементе html textarea. вы могли бы использовать какой-то редактор wysiwyg (редактируемый div). т.е. ублюдок
Это то, что я нашел, просматривая результаты поиска Google, просто надеясь, что кто-то здесь может знать что-то, что я мог пропустить. Спасибо.
См. Также ответ это.
Я столкнулся с той же проблемой и нашел очень глупое решение. Убедитесь, что отображаемый текст попадает в элементы начального и конечного тегов в одной строке, а не в следующей строке.
<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>
действительно есть такая проблема с <textarea>
очень странно, как это работает, когда весь код текстового поля находится в одной строке! ужасно отлаживать! спасибо репутация ++
дорогие друзья ... вы проверяли это перед тем, как комментировать !!! У меня не работает в HTML5
В моем случае сработало использование обычного div с contenteditable = "true". Однако не работает для большинства мобильных браузеров.
<div contenteditable = "true">Some content</div>
В зависимости от вашего целевого браузера ... это решение работает в Chrome. Однако в Firefox это не работает ... но я все равно выложу его.
Помимо установки text-align: justify, вы также должны установить white-space: normal.
textarea {
text-align: justify;
white-space: normal;
}
JSFIDDLE: http://jsfiddle.net/cb5JN/
Однако добавление "white-space: normal" заставляет IE вставлять пробелы вместо новых строк при нажатии клавиши ВВОД!
Чтобы показать новые строки, вы должны использовать пробел: перед строкой;. См. Также здесь.
Теперь он работает и без свойства white-space.
Он отлично работает в Chrome, но не в IE.
выравнивание текста: выравнивание; пробел: нормальный;
Для меня (в Firefox) этот код отлично работает:
textarea{
resize: none;
text-align: justify;
white-space: pre-line;
-moz-text-align-last: left;
text-align-last: left;
}
Я согласен, но клиент хочет, чтобы это было частью дизайна, поэтому, к сожалению, это не подходит для ситуации. Спасибо хоть.