Bagaimana menghapus bungkus kata dari textarea?

146

textarea sederhana saya tidak menampilkan bilah horizontal saat teks meluap. Itu membungkus teks untuk baris baru. Jadi bagaimana cara menghapus wordwrap dan menampilkan bilah horizontal saat teks meluap?

html textarea word-wrap StoneHeart
sumber
Apakah yang Anda maksud dengan HTML? Ayunan? sesuatu yang lain?
ksuralta
Menambahkan tag HTML untuk menghindari kebingungan itu, tapi saya hanya menebak-nebak dengan jawaban saat ini.
Sergio Acosta

Jawaban:

142

Textareas tidak boleh dibungkus secara default, tetapi Anda dapat mengatur wrap = "soft" untuk menonaktifkan bungkus secara eksplisit:

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

EDIT: Atribut "wrap" tidak didukung secara resmi. Saya mendapatkannya dari halaman SELFHTML Jerman (sumber bahasa Inggris ada di sini ) yang mengatakan bahwa IE 4.0 dan Netscape 2.0 mendukungnya. Saya juga mengujinya di FF 3.0.7 di mana ia bekerja seperti seharusnya. Banyak hal telah berubah di sini, SELFHTML sekarang menjadi wiki dan tautan sumber bahasa Inggris sudah mati.

EDIT2: Jika Anda ingin memastikan setiap browser mendukungnya, Anda dapat menggunakan CSS untuk mengubah perilaku wrap:

Menggunakan Cascading Style Sheets (CSS), Anda dapat mencapai efek yang sama dengannya white-space: nowrap; overflow: auto;. Dengan demikian, atribut wrap dapat dianggap sudah usang.

Dari sini (sepertinya halaman yang bagus dengan informasi tentang textarea).

EDIT3: Saya tidak yakin kapan itu berubah (menurut komentar, pasti sudah sekitar 2014), tetapi wrapsekarang atribut HTML5 resmi, lihat w3schools . Mengubah jawaban untuk mencocokkan ini.

schnaader
sumber
9
Atribut "wrap" berfungsi di Firefox 3.6, tetapi bukan HTML5 yang valid. Namun, solusi CSS tidak berfungsi, seolah-olah "white-space: nowrap" diabaikan.
Clint Pachl
9
white-space: pre;(atau pre-line/ pre-wrap) memiliki pengaruh yang sama dengan wrap="off"saya (padahal white-space: nowrapsaya tidak menghargai padding)
philfreo
5
@ClintPachl Sebenarnya, wrapHTML5 valid ... pengaturannya sekarang "hard"dan "soft"( ref )
Mottie
4
@Mottie Akan jauh lebih baik untuk menautkan ke versi HTML5 spesifikasi saat ini daripada ke Mozilla docs. Berikut tautan untuk versi saat ini - w3.org/TR/2014/CR-html5-20140731/forms.html#attr-textarea-wrap
Piotr Dobrogost
2
wrap="off"tidak lagi valid namun itu adalah persyaratan untuk IE dan Edge!
Jools
161 
textarea {
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: scroll;
}

white-space: nowrapjuga berfungsi jika Anda tidak peduli dengan spasi putih, tetapi tentu saja Anda tidak ingin itu jika Anda bekerja dengan kode (atau paragraf indentasi atau konten apa pun di mana mungkin sengaja ada beberapa spasi) ... jadi saya lebih suka pre.

overflow-wrap: normal(Berada word-wrapdi browser yang lebih lama) diperlukan jika beberapa orang tua telah mengubah pengaturan itu; itu dapat menyebabkan pembungkus meskipun prediatur.

juga - bertentangan dengan jawaban yang diterima saat ini - dihapus saja jangan sering membungkus secara default. pre-wraptampaknya menjadi default di browser saya.

Berawan
sumber
18
Dengan FF 20, Anda masih perlu membungkus = "off" di tag textarea html! Teknologi ini adalah omong kosong yang tidak konsisten.
Lawrence Dol
3
+1 untuk memberikan solusi CSS dan menunjukkan bahwa textareas DO wrap secara default
YePhIcK
1
Ah, tampaknya ada permintaan fitur di Firefox dari tahun 2001 tetapi dengan beberapa komentar pendukung (2014) terbaru untuk perilaku Chrome oleh dev Ehsan Akhgari: bugzilla.mozilla.org/show_bug.cgi?id=82711 . Pergi dan dengarkan itu!
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
1
Ini sekarang berfungsi di Firefox (saluran Aurora, v36 ) - lihat jsfiddle.net/mlhDevelopment/gvjy14xu the textarea hijau.
mlhDev
2
Secara pribadi, saya pikir lebih baik untuk mengganti overflow-x: scrolldengan overflow: auto. Bilah gulir mengurangi ruang pengetikan yang tersedia di area teks. IE11 juga membuat bilah gulir vertikal secara tidak perlu dengan cara Anda, tetapi overflow: automemperbaikinya.
Sam
19

Solusi berbasis CSS berikut ini berfungsi untuk saya:

<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
sumber
15

Saya menemukan cara untuk membuat textarea dengan semua ini bekerja secara bersamaan:

  • Dengan scrollbar horizontal
  • Mendukung teks multiline
  • Teks tidak dibungkus

Ini bekerja dengan baik pada:

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

Izinkan saya menjelaskan bagaimana saya mencapai hal itu: Saya menggunakan alat terintegrasi inspektur Chrome dan saya melihat nilai pada gaya CSS, jadi saya mencoba nilai-nilai ini, bukannya yang normal ... percobaan & kesalahan sampai saya dikurangi menjadi minimum dan ini dia adalah untuk siapa saja yang menginginkannya.

Di bagian CSS saya menggunakan ini untuk Chrome, Firefox, Opera dan Safari:

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

Di bagian CSS saya menggunakan ini untuk IE:

textarea {
  overflow:scroll;
}

Itu agak rumit, tetapi ada CSS.

Tag (x) HTML seperti ini:

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

Dan di akhir <head>bagian JavaScript seperti ini:

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

JavaScript adalah untuk membuat validator W3C yang melewati XHTML 1.1 Strict, karena atribut wrap tidak resmi dan dengan demikian tidak dapat menjadi tag (x) HTML secara langsung, tetapi sebagian besar browser menanganinya, jadi setelah memuat halaman itu menetapkan atribut itu.

Semoga ini dapat diuji pada lebih banyak browser dan versi dan membantu seseorang untuk memperbaikinya dan membuatnya sepenuhnya cross-browser untuk semua versi.

z666zz666z
sumber
4
+1 .wrap = 'off' adalah keajaiban yang berhasil dalam FF 14.0.1 ... Terima kasih.
Shanimal
JavaScript tampaknya tidak berfungsi di Safari 5.0.6 (versi PPC terakhir), meskipun Anda dapat menggunakan wrap = "off" dalam HTML.
.wrap adalah apa yang dilakukan untuk saya, menggunakan Chrome. Saya juga menggunakannya bersamaan dengan no-wrap in css.
MineAndCraft12
wrap = 'off' membuat IE berperilaku seperti browser lain.
Rand Scullard
4

Pertanyaan ini tampaknya menjadi yang paling populer untuk menonaktifkan textareabungkus. Namun, pada April 2017 saya menemukan bahwa IE 11 (11.0.9600) tidak akan menonaktifkan bungkus kata dengan solusi di atas.

Satu- satunya solusi yang berfungsi untuk IE 11 adalah wrap="off". wrap="soft"dan / atau berbagai atribut CSS seperti white-space: preubah di mana IE 11 memilih untuk membungkus tetapi masih membungkus di suatu tempat. Perhatikan bahwa saya telah menguji ini dengan atau tanpa Tampilan Kompatibilitas . IE 11 kompatibel dengan HTML 5, tetapi tidak dalam hal ini.

Jadi, untuk mencapai garis yang mempertahankan ruang putih mereka dan keluar dari sisi kanan saya menggunakan:

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

Kebetulan ini juga berfungsi di Chrome & Firefox. Saya tidak membela penggunaan pra-HTML 5 wrap="off", hanya mengatakan bahwa tampaknya diperlukan untuk IE 11.

JonBrave
sumber
Bagus, selamatkan hari saya! Mematahkan kepala saya mengapa pemrograman menambahkan baris baru gagal menggunakan kode dari jawaban yang diterima.
Tum
1
Bug IE ini juga telah ditransfer ke Edge
Jools
3

Jika Anda dapat menggunakan JavaScript, berikut ini mungkin opsi paling portabel saat ini (Firefox 31 yang diuji, Chrome 36):

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

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

Tampaknya tidak ada standar, solusi CSS portabel:

Juga, jika Anda dapat menggunakan Javascript, Anda mungkin juga menggunakan editor 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>

Mungkin bekerja dengan ACE karena tidak menggunakan textareasalah satu yang kurang ditentukan / diimplementasikan secara tidak jelas, tetapi tidak yakin apakah itu digunakan contenteditable.

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