ลบการตัดคำจาก textarea อย่างไร

146

ข้อความธรรมดาของฉันไม่แสดงแถบแนวนอนเมื่อมีข้อความล้น มันตัดข้อความสำหรับบรรทัดใหม่ ดังนั้นฉันจะลบ wordwrap และแสดงแถบแนวนอนเมื่อข้อความล้นได้อย่างไร

html textarea word-wrap

— StoneHeart
แหล่งที่มา

คุณหมายถึง HTML หรือเปล่า แกว่ง? อื่น ๆ อีก?

— ksuralta

เพิ่มแท็ก HTML เพื่อหลีกเลี่ยงความสับสนนั้น แต่ฉันเดาได้เฉพาะคำตอบปัจจุบัน

— Sergio Acosta

142

Textareas ไม่ควรทำการปิดโดยปริยาย แต่คุณสามารถตั้งค่า wrap = "soft" เป็นปิดการใช้งาน wrap อย่างชัดเจน:

<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 เพื่อเปลี่ยนพฤติกรรมการห่อ:

ด้วยการใช้ Cascading Style Sheets (CSS) คุณสามารถใช้เอฟเฟกต์แบบเดียวกัน white-space: nowrap; overflow: auto;ได้ ดังนั้นแอตทริบิวต์ wrap สามารถถือได้ว่าล้าสมัย

จากที่นี่ (ดูเหมือนจะเป็นหน้าที่ยอดเยี่ยมพร้อมข้อมูลเกี่ยวกับ textarea)

edit3: ผมไม่แน่ใจว่าเมื่อมันมีการเปลี่ยนแปลง (ตามความคิดเห็นที่คงจะรับรอบ 2014) แต่wrapตอนนี้เป็นคุณลักษณะ HTML5 อย่างเป็นทางการดูw3schools เปลี่ยนคำตอบเพื่อให้ตรงกับนี้

— schnaader
แหล่งที่มา

9

แอตทริบิวต์ "wrap" ทำงานได้ใน Firefox 3.6 แต่ไม่ถูกต้อง HTML5 อย่างไรก็ตามโซลูชัน CSS ไม่ทำงานราวกับว่า "white-space: nowrap" ถูกละเว้น

— Clint Pachl

9

white-space: pre;(หรือpre-line/ pre-wrap) มีผลเช่นเดียวwrap="off"กับฉัน (ในขณะที่white-space: nowrapไม่เคารพpadding)

— philfreo

5

@ClintPachl ที่จริงแล้วwrapเป็น HTML5 ที่ถูกต้อง ... การตั้งค่าเป็นตอนนี้"hard"และ"soft"( อ้างอิง )

— Mottie

4

@Mottie มันจะเป็นการดีกว่าถ้าจะเชื่อมโยงไปยังข้อมูลจำเพาะ HTML5 เวอร์ชันปัจจุบันมากกว่าไปยังเอกสาร Mozilla นี่คือลิงค์สำหรับรุ่นปัจจุบัน - w3.org/TR/2014/CR-html5-20140731/forms.html#attr-textarea-wrap

— Piotr Dobrogost

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จะตั้งค่าแล้วก็ตาม

ยัง - ขัดกับคำตอบที่ได้รับการยอมรับในปัจจุบัน - textareas ไม่มักจะห่อโดยค่าเริ่มต้น pre-wrapดูเหมือนว่าจะเป็นค่าเริ่มต้นในเบราว์เซอร์ของฉัน

— มีเมฆบางส่วน
แหล่งที่มา

18

ด้วย FF 20 คุณยังคงต้องการ wrap = "off" ในแท็ก textarea html! เทคโนโลยีนี้เป็นอึที่ไม่สอดคล้องกันเช่นนั้น

— Lawrence Dol

3

+1 สำหรับการให้บริการโซลูชัน CSS และชี้ให้เห็นว่า textareas DO wrap โดยค่าเริ่มต้น

— YePhIcK

1

อาดูเหมือนว่าจะมีคำขอคุณลักษณะ Firefox จาก 2001 แต่มีบางส่วนที่ผ่านมา (2014) ความเห็นสนับสนุนสำหรับพฤติกรรม Chrome โดย dev Ehsan Akhgari: bugzilla.mozilla.org/show_bug.cgi?id=82711 ไปและโหวตขึ้น!

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

1

ตอนนี้ใช้งานได้ใน Firefox (Aurora channel, v36) - ดูjsfiddle.net/mlhDevelopment/gvjy14xu textarea สีเขียว

— mlhDev

2

ส่วนตัวผมคิดว่ามันจะดีกว่าที่จะมาแทนที่ด้วยoverflow-x: scroll overflow: autoแถบเลื่อนจะลดพื้นที่พิมพ์ที่มีอยู่ในพื้นที่ข้อความ นอกจากนี้ IE11 ยังแสดงแถบเลื่อนแนวตั้งโดยไม่จำเป็น แต่ให้overflow: autoแก้ไข

— Sam

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>

— Galghamon
แหล่งที่มา

15

ฉันพบวิธีสร้าง textarea ด้วยการทำงานทั้งหมดนี้ในเวลาเดียวกัน:

ด้วยแถบเลื่อนแนวนอน
รองรับข้อความหลายบรรทัด
ข้อความไม่ได้ห่อ

มันทำงานได้ดีบน:

Chrome 15.0.874.120
Firefox 7.0.1
Opera 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

แท็ก HTML (x) เช่นนี้:

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

และในตอนท้ายของ <head>ส่วน JavaScript เช่นนี้:

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

JavaScript ใช้สำหรับการทำให้ตัวตรวจสอบความถูกต้อง W3C ผ่าน XHTML 1.1 เข้มงวดเนื่องจากแอตทริบิวต์การตัดไม่เป็นทางการดังนั้นจึงไม่สามารถเป็น (x) แท็ก HTML โดยตรง แต่เบราว์เซอร์ส่วนใหญ่จัดการกับมันดังนั้นหลังจากโหลดหน้าเว็บ

หวังว่าจะสามารถทดสอบได้ในเบราว์เซอร์และรุ่นเพิ่มเติมและช่วยให้คนอื่นปรับปรุงมันและทำให้มันข้ามเบราว์เซอร์อย่างเต็มที่สำหรับทุกรุ่น

— z666zz666z
แหล่งที่มา

4

+1 .wrap = 'off' เป็นเวทย์มนตร์ที่ใช้กลอุบายใน FF 14.0.1 ... ขอบคุณ

— Shanimal

ดูเหมือนว่า JavaScript จะไม่ทำงานบน Safari 5.0.6 (เวอร์ชัน PPC ล่าสุด) แม้ว่าคุณจะสามารถใช้ wrap = "off" ใน HTML ได้ก็ตาม

.wrap คือสิ่งที่ทำเพื่อฉันโดยใช้ Chrome ฉันยังใช้ร่วมกับ no-wrap ใน css

— MineAndCraft12

wrap = 'off' ทำให้ IE ทำงานเหมือนเบราว์เซอร์อื่น

— Rand Scullard

4

คำถามนี้ดูเหมือนจะเป็นคำถามยอดนิยมสำหรับการปิดใช้งานการtextareaตัดคำ อย่างไรก็ตามเมื่อวันที่เมษายน 2017 ฉันพบว่าIE 11 (11.0.9600) จะไม่ปิดการใช้งานการห่อคำด้วยวิธีการใด ๆ ข้างต้น

เพียงการแก้ปัญหาที่ไม่ทำงานสำหรับ IE wrap="off"11 wrap="soft"และ / หรือคุณลักษณะ CSS ต่าง ๆ เช่นwhite-space: preแก้ไขที่ IE 11 เลือกที่จะตัด แต่ก็ยังคงล้อมอยู่ที่ไหนสักแห่ง โปรดทราบว่าฉันมีการทดสอบนี้มีหรือไม่มีความเข้ากันได้ดู IE 11 นั้นใช้งานได้กับ HTML 5 แต่ไม่ได้อยู่ในกรณีนี้

ดังนั้นเพื่อให้ได้สายที่รักษาช่องว่างของพวกเขาและออกไปทางด้านขวามือที่ฉันใช้:

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

โชคดีที่สิ่งนี้ดูเหมือนจะใช้ได้กับ Chrome & Firefox ด้วย ฉันไม่ได้ป้องกันการใช้งาน pre-HTML 5 wrap="off"เพียงแค่บอกว่ามันดูเหมือนว่าจำเป็นสำหรับ IE 11

— JonBrave
แหล่งที่มา

นีซ, ช่วยชีวิตฉันไว้! ทำไมฉันถึงไม่สามารถเพิ่มบรรทัดใหม่โดยใช้รหัสจากคำตอบที่ยอมรับได้

— Tum

1

ข้อผิดพลาด IE นี้ก็ถูกโอนไปยัง Edge

— Jools

3

หากคุณสามารถใช้ JavaScript ต่อไปนี้อาจเป็นตัวเลือกพกพามากที่สุดในวันนี้ (ทดสอบ Firefox 31, Chrome 36):

div ด้วย contenteditable="true"
สไตล์ที่แนะนำโดย Partly
การส่งแบบฟอร์ม 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 textarea31 ซอ , คุณลักษณะเปิดคำขอ

นอกจากนี้หากคุณสามารถใช้ 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 郝海东法轮功病六四法轮功法轮功
แหล่งที่มา