Як видалити обгортання слів з textarea?

146

у моєї простої текстової області не відображається горизонтальна смужка, коли текст переповнюється. Він обгортає текст для нового рядка. Тож як я можу видалити обгортання слів та відобразити горизонтальну смужку, коли текст переповнюється?

html textarea word-wrap

— StoneHeart
джерело

Ви маєте на увазі HTML? Гойдалки? щось ще?

— ksuralta

Додано тег HTML, щоб уникнути плутанини, але я лише здогадуюсь за поточними відповідями.

— Серхіо Акоста

142

Textareas не має завершуватися за замовчуванням, але ви можете встановити wrap = "soft", щоб явно відключити обгортання:

<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 можна вважати застарілим.

Від тут (здається, відмінна сторінка з інформацією про текстовому).

EDIT3: Я не впевнений, коли він змінився (згідно з коментарями, мабуть, був у 2014 році), але wrapзараз це офіційний атрибут HTML5, дивіться w3schools . Змінили відповідь, щоб відповідати цьому.

— шнадер
джерело

9

Атрибут "wrap" працює у Firefox 3.6, але не є дійсним HTML5. Однак рішення CSS не працює, як ніби "white-space: nowrap" ігнорується.

— Клінт Пахл

9

white-space: pre;(або pre-line/ pre-wrap) вплинув так само, як і wrap="off"на мене (тоді як white-space: nowrapне поважав padding)

— philfreo

5

@ClintPachl Насправді, wrapдійсний HTML5 ... його налаштування зараз "hard"і "soft"( ref )

— Mottie

4

@Mottie Було б набагато краще посилання на поточну версію специфікації HTML5, ніж на документи Mozilla. Ось посилання на поточну версію - w3.org/TR/2014/CR-html5-20140731/forms.html#attr-textarea-wrap

— Piotr

2

wrap="off"більше не діє, проте це вимога як для IE, так і для Edge!

— Jools

161

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

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

overflow-wrap: normal(був word-wrapу старих браузерах) потрібен у випадку, якщо хтось із батьків змінив це налаштування; це може спричинити обгортання, навіть якщоpre воно встановлено.

також - в відміну від прийнятого в даний час відповіді - прокручуваний робити часто загорнути за замовчуванням. pre-wrapздається, за замовчуванням у моєму браузері.

— Мінлива хмарність
джерело

18

З FF 20 вам все ще потрібно wrap = "off" у тезі html textarea! Ця технологія - це така непослідовна лайна.

— Лоуренс Дол

3

+1 за надання CSS-рішення та вказує на те, що textareas DO завершується за замовчуванням

— YePhIcK

1

А, схоже, є запит на функцію Firefox з 2001 року, але деякі останні (2014 р.), Які підтримують коментарі щодо поведінки Chrome від Dev Ehsan Akhgari: bugzilla.mozilla.org/show_bug.cgi?id=82711 . Іди і підтверджуй це!

— Ciro Santilli 郝海东冠状病六四事件法轮功

1

Зараз це працює у Firefox (канал Aurora, v36) - див. Jsfiddle.net/mlhDevelopment/gvjy14xu зелену текстову область .

— mlhDev

2

Особисто я вважаю, що краще замінити overflow-x: scrollна overflow: auto. Панелі прокрутки зменшують доступний простір для набору тексту в області тексту. Крім того, IE11 надав вертикальну смугу прокрутки без зайвих зусиль, але overflow: autoзафіксував її.

— Сем

19

Наступне рішення на базі 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>

— Галгхемон
джерело

15

Я знайшов спосіб зробити textarea, щоб все це працювало одночасно:

З горизонтальною смугою прокрутки
Підтримка багаторядкового тексту
Текст не обгортається

Він добре працює на:

Chrome 15.0.874.120
Firefox 7.0.1
Опера 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 не є офіційним і, таким чином, не може бути безпосередньо тегом HTML, але більшість браузерів обробляє його, тому після завантаження сторінки він встановлює цей атрибут.

Сподіваємось, що це можна перевірити на більшій кількості браузерів та версій, а також допомогти комусь покращити його та зробить його повністю перехресним браузером для всіх версій.

— z666zz666z
джерело

4

+1 .wrap = 'off' - це магія, яка зробила трюк у FF 14.0.1 ... Дякую.

— Шанімаль

Схоже, JavaScript не працює на Safari 5.0.6 (остання версія PPC), навіть якщо ви можете використовувати wrap = "off" у HTML.

.wrap - це те, що зробили для мене, використовуючи Chrome. Я також використовував його спільно з no-wrap у css.

— MineAndCraft12

wrap = 'off' змусив IE вести себе, як і інші браузери.

— Ранд Склярд

4

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

Тільки рішення , яке робить роботу для IE 11 є wrap="off". wrap="soft"та / або різні атрибути CSS, такі як white-space: prealter, де IE 11 вирішує обернути, але він все ще десь завертається. Зауважте, що я перевірив це з переглядом сумісності або без нього . IE 11 - це досить сумісний HTML 5, але не в цьому випадку.

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

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

На щастя це, здається, працює і в Chrome & Firefox. Я не захищаю використання попереднього HTML 5 wrap="off", просто кажу, що, здається, потрібно IE 11.

— JonBrave
джерело

Гарний, врятував мені день! Зламав голову над тим, чому програмне додавання нових рядків не вдалося за допомогою коду з прийнятої відповіді.

— Тум

1

Ця помилка IE також була передана в Edge

— Jools

3

Якщо ви можете використовувати JavaScript, наступний варіант може бути найбільш портативним (перевірений Firefox 31, Chrome 36):

дів с contenteditable="true"
стилі, запропоновані Частково
Надання форми 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.

— Ciro Santilli 郝海东冠状病六四事件法轮功
джерело