Как удалить перенос слов из textarea?

моя простая текстовая область не показывает горизонтальную полосу при переполнении текста. Он переносит текст для новой строки. Итак, как удалить wordwrap и отобразить горизонтальную полосу при переполнении текста?

Ответ 1

Textareas не следует обертывать по умолчанию, но вы можете установить wrap = "soft", чтобы явно отключить wrap:

<textarea name="nowrap" cols="30" rows="3" wrap="soft"></textarea>

EDIT: атрибут "wrap" официально не поддерживается. Я получил его из немецкую страницу SELFHTML (английский источник здесь), в котором говорится, что IE 4.0 и Netscape 2.0 поддерживают его. Я также тестировал его в FF 3.0.7, где он работает так, как предполагалось. Здесь все изменилось, SELFHTML теперь является вики, а ссылка на исходный текст на английском языке мертва.

EDIT2: Если вы хотите убедиться, что все браузер поддерживает его, вы можете использовать CSS для изменения поведения обхода:

Используя каскадные таблицы стилей (CSS), вы можете добиться такого же эффекта с помощью white-space: nowrap; overflow: auto;. Таким образом, атрибут wrap можно считать устаревшим.

Из здесь (кажется, отличная страница с информацией о textarea).

EDIT3: я не уверен, когда он изменился (согласно комментариям, должно быть, было около 2014 года), но wrap теперь является официальным атрибутом HTML5, см. w3schools. Изменен ответ, чтобы соответствовать этому.

Ответ 2

textarea {
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: scroll;
}

white-space: nowrap также работает, если вам небезразличен пробел, но, конечно, вы не хотите, чтобы это было, если вы работаете с кодом (или с отступом абзаца или любым контентом, где может быть намеренно несколько пробелов). поэтому я предпочитаю pre.

overflow-wrap: normal (был word-wrap в старых браузерах) необходим, если какой-либо родительский параметр изменил этот параметр; он может вызвать обертывание, даже если pre установлен.

также - вопреки принятому в настоящее время ответам - textareas do часто обматываются по умолчанию. pre-wrap кажется по умолчанию в моем браузере.

Ответ 3

Для меня работает следующее решение на основе CSS:

<html>
 <head>
  <style type='text/css'>
   textarea {
    white-space: nowrap;
    overflow:    scroll;
    overflow-y:  hidden;
    overflow-x:  scroll;
    overflow:    -moz-scrollbars-horizontal;
   }
  </style>
 </head>
 <body>
  <form>
   <textarea>This is a long line of text for testing purposes...</textarea>
  </form>
 </body>
</html>

Ответ 4

Я нашел способ сделать текстовое поле со всем этим, работая одновременно:

С горизонтальной полосой прокрутки
Поддержка многострочного текста
Текст не обертывается

Хорошо работает:

Chrome 15.0.874.120
Firefox 7.0.1
Opera 11.52 (1100)
Safari 5.1 (7534.50)
IE 8.0.6001.18702

Позвольте мне объяснить, как я это понимаю: я использовал встроенный инструмент инспектора Chrome, и я видел значения в стилях CSS, поэтому я стараюсь использовать эти значения вместо обычных... проб и ошибок до тех пор, пока я не уменьшу их до минимума и здесь это для тех, кто хочет этого.

В разделе CSS я использовал именно это для Chrome, Firefox, Opera и Safari:

textarea {
  white-space:nowrap;
  overflow:scroll;
}

В разделе CSS я использовал именно это для IE:

textarea {
  overflow:scroll;
}

Это было немного сложно, но есть CSS.

Тег (x) HTML:

<textarea id="myTextarea" rows="10" cols="15"></textarea>

И в конце раздела <head> JavaScript выглядит следующим образом:

 window.onload=function(){
   document.getElementById("myTextarea").wrap='off';
 }

JavaScript предназначен для того, чтобы сделать валидатор W3C XHTML 1.1 Strict, поскольку атрибут wrap не является официальным и, следовательно, не может быть (x) HTML-тегом напрямую, но большинство браузеров обрабатывают его, поэтому после загрузки страницы он устанавливает этот атрибут.

Надеюсь, что это можно протестировать в других браузерах и версиях и помочь кому-то улучшить его и сделать его полностью кросс-браузером для всех версий.

Ответ 5

Если вы можете использовать JavaScript, сегодня может быть самым переносимым вариантом (протестирован Firefox 31, Chrome 36):

a div с contenteditable="true"
стили, предложенные Partly
Отправка формы JavaScript при нажатии кнопки: Как отправить форму с помощью javascript?

http://jsfiddle.net/cirosantilli/eaxgesoq/

<style>
  div#editor {
    white-space: pre;
    word-wrap: normal;
    overflow-x: scroll;
  }
<style>
<div contenteditable="true"></div>

Кажется, нет стандартного портативного решения для CSS:

wrap атрибут не является стандартным
white-space: pre; не работает для Firefox 31 для textarea. Fiddle, открыть запрос функции.

Кроме того, если вы можете использовать Javascript, вы можете также использовать редактор ACE:

http://jsfiddle.net/cirosantilli/bL9vr8o8/

<script src="http://cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
<div id="editor">content</div>
<script>
  var editor = ace.edit('editor')
  editor.renderer.setShowGutter(false)
</script>

Вероятно, работает с ACE, потому что он не использует textarea, который не указан/несовместим, но не уверен, использует ли он contenteditable.

Ответ 6

Этот вопрос кажется самым популярным для отключения textarea wrap. Однако по состоянию на апрель 2017 года я обнаружил, что IE 11 (11.0.9600) будет не отключать перенос слов любым из указанных выше решений.

Единственное решение, которое работает для IE 11, - это wrap="off". wrap="soft" и/или различные атрибуты CSS, такие как white-space: pre, изменяют, где IE 11 решает обернуть, но он все еще где-то обертывается. Обратите внимание, что я тестировал это с помощью Просмотр совместимости. IE 11 довольно совместим с HTML 5, но не в этом случае.

Таким образом, для достижения линий, сохраняющих их пробелы и выходящих из правой части, я использую:

<textarea style="white-space: pre; overflow: scroll;" wrap="off">

Это, похоже, работает в Chrome и Firefox. Я не защищаю использование pre-HTML 5 wrap="off", просто говоря, что это похоже на IE 11.