Как удалить перенос слов из текстовой области? - PullRequest
Новая
       17

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

132 голосов
/ 18 марта 2009

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

Ответы [ 6 ]

142 голосов
/ 19 ноября 2012 
textarea {
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: scroll;
}

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

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

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

136 голосов
/ 18 марта 2009

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

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

РЕДАКТИРОВАТЬ: Атрибут "wrap" официально не поддерживается. Я получил его со немецкой страницы SELFHTML (англоязычный источник здесь ), в которой говорится, что IE 4.0 и Netscape 2.0 поддерживают его. Я также протестировал его в FF 3.0.7, где он работает как положено. Здесь все изменилось, теперь SELFHTML - это вики, а ссылка на источник на английском языке устарела.

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

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

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

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

18 голосов
/ 18 марта 2009

У меня работает следующее решение на основе 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>
13 голосов
/ 15 ноября 2011

Я нашел способ создать текстовую область, в которой все это работает одновременно:

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

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

  • Chrome 15.0.874.120
  • Firefox 7.0.1
  • Опера 11,52 (1100)
  • Safari 5.1 (7534.50)
  • IE 8.0.6001.18702

Позвольте мне объяснить, как мне это сделать: я использовал интегрированный инструмент Chrome inspector и увидел значения в стилях 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 напрямую, но большинство браузеров обрабатывают его, поэтому после загрузки страницы он устанавливает этот атрибут .

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

3 голосов
/ 06 апреля 2017

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

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

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

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

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

3 голосов

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

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

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

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

Кроме того, если вы можете использовать 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.

...