Jak usunąć zawijanie słów z obszaru tekstowego?

146

mój prosty obszar tekstowy nie wyświetla poziomego paska, gdy tekst się przepełnia. Zawija tekst w nowym wierszu. Jak więc usunąć zawijanie słów i wyświetlić poziomy pasek, gdy tekst się przepełnia?

html textarea word-wrap Serce z kamienia
źródło
Masz na myśli HTML? Huśtawka? coś innego?
ksuralta
Dodano tag HTML, aby uniknąć tego zamieszania, ale zgaduję tylko na podstawie aktualnych odpowiedzi.
Sergio Acosta

Odpowiedzi:

142

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

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

EDYCJA: Atrybut „wrap” nie jest oficjalnie obsługiwany. Dostałem go od strony SELFHTML german (angielski źródło jest tutaj ), który mówi, IE 4.0 i Netscape 2.0 wspierać. Przetestowałem go również w FF 3.0.7, gdzie działa zgodnie z oczekiwaniami. Tutaj sytuacja się zmieniła, SELFHTML jest teraz wiki, a angielski link do źródła nie działa.

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

Korzystając z kaskadowych arkuszy stylów (CSS), możesz osiągnąć ten sam efekt za pomocą white-space: nowrap; overflow: auto;. W związku z tym atrybut zawijania można uznać za nieaktualny.

Od tutaj (wydaje się być doskonałym strona z informacjami o textarea).

EDIT3: Nie jestem pewien, kiedy to się zmieniło (zgodnie z komentarzami, musiało to być około 2014 roku), ale wrapteraz jest to oficjalny atrybut HTML5, patrz w3schools . Zmieniono odpowiedź, aby pasowała do tego.

schnaader
źródło
9
Atrybut „wrap” działa w przeglądarce Firefox 3.6, ale nie jest prawidłowym HTML5. Jednak rozwiązanie CSS nie działa, tak jakby „white-space: nowrap” było ignorowane.
Clint Pachl,
9
white-space: pre;(lub pre-line/ pre-wrap) miał taki sam wpływ jak wrap="off"u mnie ( white-space: nowrapale nie szanowałem padding)
philfreo
5
@ClintPachl Właściwie wrapjest poprawny HTML5 ... jego ustawienia są teraz "hard"i "soft"( ref )
Mottie
4
@Mottie Znacznie lepiej byłoby zamieścić link do aktualnej wersji specyfikacji HTML5 niż do dokumentacji Mozilli. Oto link do aktualnej wersji - w3.org/TR/2014/CR-html5-20140731/forms.html#attr-textarea-wrap
Piotr Dobrogost
2
wrap="off"nie jest już ważny, ale jest wymagany zarówno dla IE, jak i Edge!
Jools
161 
textarea {
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: scroll;
}

white-space: nowrapdziała również, jeśli nie przejmujesz się białymi znakami, ale oczywiście nie chcesz tego, jeśli pracujesz z kodem (lub akapitami z wcięciem lub dowolną treścią, w której celowo może być wiele spacji) ... więc wolę pre.

overflow-wrap: normal(było word-wrapw starszych przeglądarkach) jest potrzebne na wypadek, gdyby jakiś rodzic zmienił to ustawienie; może powodować zawijanie, nawet jeślipre jest ustawione.

także - w przeciwieństwie do obecnie przyjętej odpowiedź - pola tekstowe mają często zawijać domyślnie. pre-wrapwydaje się być domyślnym ustawieniem w mojej przeglądarce.

Częściowe zachmurzenie
źródło
18
W przypadku FF 20 nadal potrzebujesz wrap = "off" w tagu html textarea! Ta technologia to takie niekonsekwentne bzdury.
Lawrence Dol
3
+1 za dostarczenie rozwiązania CSS i wskazanie, że
obszary tekstowe
1
Ach, wygląda na to, że w Firefoksie pojawiła się prośba o funkcję od 2001 roku, ale z niektórymi niedawnymi (2014) komentarzami dotyczącymi zachowania Chrome autorstwa programisty Ehsana Akhgari: bugzilla.mozilla.org/show_bug.cgi?id=82711 . Idź i zagłosuj!
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
1
To teraz działa w Firefoksie (kanał Aurora, v36) - zobacz jsfiddle.net/mlhDevelopment/gvjy14xu, zielony obszar tekstowy .
mlhDev
2
Osobiście uważam, że lepiej jest zastąpić overflow-x: scrollz overflow: auto. Paski przewijania zmniejszają dostępną przestrzeń do wpisywania w obszarze tekstowym. Ponadto IE11 niepotrzebnie renderował pionowy pasek przewijania, ale overflow: autonaprawił go.
Sam
19

U mnie działa następujące rozwiązanie oparte na 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>
Galghamon
źródło
15

Znalazłem sposób na stworzenie obszaru tekstowego z tym wszystkim działającym w tym samym czasie:

  • Z poziomym paskiem przewijania
  • Obsługa tekstu wielowierszowego
  • Tekst się nie zawija

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, że wyjaśnię, jak do tego doszedłem: korzystałem ze zintegrowanego narzędzia Chrome Inspector i widziałem wartości w stylach CSS, więc próbuję tych wartości zamiast normalnych ... prób i błędów, dopóki nie zredukuję ich do minimum i tutaj to 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 tylko tego dla IE:

textarea {
  overflow:scroll;
}

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

Tag (x) HTML, taki jak ten:

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

A na końcu <head>sekcji JavaScript jak ten:

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

JavaScript służy do tego, aby walidator W3C przekazywał XHTML 1.1 Strict, ponieważ atrybut wrap nie jest oficjalny i dlatego nie może być bezpośrednio tagiem (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ś ulepszyć to i sprawić, że będzie to w pełni cross-browser dla wszystkich wersji.

z666zz666z
źródło
4
+1 .wrap = 'off' to magia, która załatwiła sprawę w FF 14.0.1 ... Dzięki.
Shanimal,
Wydaje się, że JavaScript nie działa w przeglądarce Safari 5.0.6 (ostatnia wersja PPC), mimo że w kodzie HTML można użyć wrap = "off".
.wrap jest tym, co zrobił dla mnie, używając Chrome. Użyłem go również w połączeniu z brakiem zawijania w css.
MineAndCraft12
wrap = 'off' powoduje, że IE zachowuje się jak inne przeglądarki.
Rand Scullard
4

To pytanie wydaje się być najbardziej popularne przy wyłączaniu textareazawijania. Jednak od kwietnia 2017 r. Uważam, że IE 11 (11.0.9600) nie wyłącza zawijania słów żadnym z powyższych rozwiązań.

Tylko rozwiązanie, które działa na IE 11 jest wrap="off". wrap="soft"i / lub różne atrybuty CSS, takie jak white-space: prealter, w których IE 11 wybiera zawijanie, ale nadal gdzieś zawija. Zauważ, że przetestowałem to z lub bez widoku zgodności . IE 11 jest całkiem kompatybilny z HTML 5, ale nie w tym przypadku.

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

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

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

JonBrave
źródło
Niezły, uratował mi dzień! Łamałem głowę, dlaczego programowe dodawanie nowych linii nie powiodło się przy użyciu kodu z zaakceptowanej odpowiedzi.
Tum
1
Ten błąd IE został również przeniesiony do Edge
Jools
3

Jeśli możesz używać JavaScript, poniższa opcja może być obecnie najbardziej przenośną opcją (przetestowany 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:

Ponadto, 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żadnego, który jest niedookreślony / niespójny zaimplementowany, ale nie jest pewien, czy jest używany contenteditable.

Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
źródło