Jak usunąć zawijanie Worda z textarea?

Mój prosty textarea nie pokazuje poziomego paska, gdy tekst jest przepełniony. Zawija tekst dla nowej linii. Jak więc usunąć wordwrap i wyświetlić poziomy pasek, gdy tekst jest przepełniony?

Author: Panagiotis Panagi, 2009-03-18
Source

6 answers

Textareas nie powinien domyślnie zawijać, ale możesz ustawić wrap= "soft", aby jawnie wyłączyć zawijanie: 

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

EDIT: atrybut "wrap" nie jest oficjalnie obsługiwany. Mam go z niemieckiej strony SELFHTML (angielskie Źródło to tutaj ), która mówi, że IE 4.0 i Netscape 2.0 obsługują go. Testowałem go również w FF 3.0.7 gdzie działa jak powinno. rzeczy się tutaj zmieniły, SELFHTML jest teraz wiki, a angielskie źródło linku jest martwe.

EDIT2: jeśli chcesz być na pewno każda przeglądarka go obsługuje, możesz użyć CSS, aby zmienić zachowanie zawijania:

Używając kaskadowych arkuszy stylów (CSS), możesz osiągnąć ten sam efekt z white-space: nowrap; overflow: auto;. Tak więc atrybut wrap można uznać za przestarzały.

Z tutaj (wydaje się być doskonałą stroną z informacjami o textarea).

EDIT3: nie jestem pewien, kiedy to się zmieniło( zgodnie z komentarzami, musiało być około 2014), ale wrap jest teraz oficjalnym atrybutem HTML5, zobacz w3schools . Zmieniłem odpowiedź, żeby pasowała do tego.

 149
Author: schnaader,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-06 19:53:44 
textarea {
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: scroll;
}

white-space: nowrap działa również, jeśli nie zależy ci na białych znakach, ale oczywiście nie chcesz tego, jeśli pracujesz z kodem (lub z wciętymi akapitami lub dowolną zawartością, w której celowo może być wiele spacji) ... więc wolę pre.

overflow-wrap: normal (was word-wrap w starszych przeglądarkach) jest potrzebny w przypadku, gdy jakiś rodzic zmienił to ustawienie; może powodować zawijanie nawet jeśli pre jest ustawione.

Również-wbrew aktualnie przyjętej odpowiedzi-textareas czy często zawijają przez default. pre-wrap wydaje się być domyślna w mojej przeglądarce.

 169
Author: Partly Cloudy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-07 23:26:48

Następujące rozwiązanie oparte na CSS działa dla mnie: 

<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>
 19
Author: Galghamon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-03-18 13:13:00

Znalazłem sposób na zrobienie textarea z tym wszystkim działającym w tym samym czasie:

  • z poziomym paskiem przewijania
  • Obsługa tekstu wielowierszowego
  • tekst nie zawijany

Działa dobrze na:

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

Pozwól mi wyjaśnić, jak do tego doszedłem: używałem zintegrowanego narzędzia Chrome inspector i widziałem wartości w stylach CSS, więc próbuję tych wartości, zamiast normalnych... próby i błędy, dopóki nie zmniejszyłem go do minimum, a tutaj jest dla każdego, kto tego chce.

W sekcji CSS użyłem tylko tego dla Chrome, Firefox, Opera i Safari: 

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

W sekcji CSS użyłem właśnie tego dla IE: 

textarea {
  overflow:scroll;
}

To było trochę trudne, ale jest CSS.

Znacznik (x)HTML taki: 

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

I na końcu <head> sekcji a JavaScript tak: 

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

JavaScript jest aby walidator W3C był zgodny z XHTML 1.1 Strict, ponieważ atrybut wrap nie jest oficjalny i nie może być bezpośrednio znacznikiem (x)HTML, ale większość przeglądarek obsługuje go, więc po załadowaniu strony ustawia ten atrybut.

Mam nadzieję, że można to przetestować na większej liczbie przeglądarek i wersji i pomóc komuś go ulepszyć i uczynić go w pełni cross-browser dla wszystkich wersji.

 15
Author: z666zz666z,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-08 05:04:53

To pytanie wydaje się być najbardziej popularne przy wyłączaniu textarea wrap. Jednak od kwietnia 2017 roku stwierdzam, że IE 11 (11.0.9600) będzie nie wyłączać zawijanie wyrazów z którymkolwiek z powyższych rozwiązań.

Jedynym rozwiązaniem , które działa dla IE 11 jest wrap="off". wrap="soft" i/lub różne atrybuty CSS, takie jak white-space: pre zmieniają miejsce, w którym IE 11 wybiera zawijanie, ale nadal gdzieś zawija. Zauważ, że testowałem to z lub bez widok zgodności . IE 11 jest ładny HTML 5 zgodny, ale nie w tym przypadku.

Tak więc, aby uzyskać linie, które zachowują swoją białą spację i wychodzą z prawej strony używam: 

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

Na szczęście wydaje się to działać również w Chrome & Firefox. Nie bronię używania pre-HTML 5 wrap="off", tylko mówię, że wydaje się być wymagany dla IE 11.

 4
Author: JonBrave,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-06 15:26:05

Jeśli możesz używać JavaScript, następujące opcje mogą być obecnie najbardziej przenośną opcją (testowany 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>

Wydaje się, że nie ma standardowego, przenośnego rozwiązania CSS:

Również, jeśli możesz używać Javascript, równie dobrze możesz użyć edytora 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>

Prawdopodobnie działa z ACE, ponieważ nie używa textarea, które nie jest sprecyzowane / niespójnie zaimplementowane, ale nie jest pewne, czy używa contenteditable.

 3
Author: Ciro Santilli TRUMP BAN IS BAD,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:18:24