Làm thế nào để loại bỏ bọc từ textarea?

146

textarea đơn giản của tôi không hiển thị một thanh ngang khi văn bản tràn ra. Nó kết thúc văn bản cho một dòng mới. Vậy làm cách nào để loại bỏ wordwrap và hiển thị thanh ngang khi văn bản tràn ra?

html textarea word-wrap

— Trái tim sắt đá
nguồn

Ý bạn là về HTML? Lung lay? thứ gì khác?

— ksuralta 18/03/2016

Đã thêm thẻ HTML để tránh sự nhầm lẫn đó, nhưng tôi chỉ đoán theo các câu trả lời hiện tại.

— Sergio Acosta

142

Textareas không nên bọc theo mặc định, nhưng bạn có thể đặt quấn = "mềm" để vô hiệu hóa bọc:

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

EDIT: Thuộc tính "bọc" không được hỗ trợ chính thức. Tôi đã nhận được nó từ trang SELFHTML của Đức (nguồn tiếng Anh ở đây ) cho biết IE 4.0 và Netscape 2.0 hỗ trợ nó. Tôi cũng đã thử nghiệm nó trong FF 3.0.7, nơi nó hoạt động như được cho là. Mọi thứ đã thay đổi ở đây, SELFHTML hiện là wiki và liên kết nguồn tiếng Anh đã chết.

EDIT2: Nếu bạn muốn chắc chắn mọi trình duyệt đều hỗ trợ nó, bạn có thể sử dụng CSS để thay đổi hành vi bao bọc:

Sử dụng Cascading Style Sheets (CSS), bạn có thể đạt được hiệu quả tương tự với white-space: nowrap; overflow: auto;. Do đó, thuộc tính quấn có thể được coi là lỗi thời.

Từ đây (dường như là một trang tuyệt vời với thông tin về textarea).

EDIT3: Tôi không chắc chắn khi nào nó thay đổi (theo nhận xét, phải có vào khoảng năm 2014), nhưng wrapbây giờ là một thuộc tính HTML5 chính thức, xem w3schools . Thay đổi câu trả lời để phù hợp với điều này.

— schnaader
nguồn

9

Thuộc tính "bọc" hoạt động trong Firefox 3.6, nhưng HTML5 không hợp lệ. Tuy nhiên, giải pháp CSS không hoạt động, như thể "khoảng trắng: nowrap" bị bỏ qua.

— Clint Pachl

9

white-space: pre;(hoặc pre-line/ pre-wrap) có ảnh hưởng tương tự như wrap="off"đối với tôi (trong khi white-space: nowrapkhông tôn trọng padding)

— philfreo 18/03/13

5

@ClintPachl Trên thực tế, wraplà HTML5 hợp lệ ... hiện tại cài đặt của nó "hard"và "soft"( ref )

— Mottie

4

@Mottie Sẽ tốt hơn nhiều nếu liên kết với phiên bản hiện tại của đặc tả HTML5 so với tài liệu Mozilla. Đây là liên kết cho phiên bản hiện tại - w3.org/TR/2014/CR-html5-20140731/forms.html#attr-textarea-wrap

— Piotr Dobrogost

2

wrap="off"không còn hợp lệ tuy nhiên đó là yêu cầu cho cả IE và Edge!

— Jools

161

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

white-space: nowrapcũng hoạt động nếu bạn không quan tâm đến khoảng trắng, nhưng tất nhiên bạn không muốn rằng nếu bạn đang làm việc với mã (hoặc đoạn văn thụt lề hoặc bất kỳ nội dung nào có thể cố tình có nhiều khoảng trắng) ... vì vậy tôi thích pre.

overflow-wrap: normal(là word-wraptrong các trình duyệt cũ hơn) là cần thiết trong trường hợp một số phụ huynh đã thay đổi cài đặt đó; nó có thể gây ra sự quấn ngay cả khi pređược đặt.

cũng - trái với câu trả lời chấp nhận hiện nay - textareas làm thường quấn theo mặc định. pre-wrapdường như là mặc định trên trình duyệt của tôi.

— Một phần mây
nguồn

18

Với FF 20, bạn vẫn cần quấn = "tắt" trong thẻ textarea html! Công nghệ này là không phù hợp như vậy.

— Lawrence Dol

3

+1 để cung cấp giải pháp CSS và chỉ ra rằng textareas DO bao bọc theo mặc định

— YePhIcK

1

À, dường như có một yêu cầu tính năng trên Firefox từ năm 2001 nhưng với một số nhận xét hỗ trợ gần đây (2014) cho hành vi Chrome của nhà phát triển Ehsan Akhgari: bugzilla.mozilla.org/show_orms.cgi?id=82711 . Đi và nâng cấp nó!

— Ciro Santilli 郝海东冠状病事件

1

Điều này hiện hoạt động trong Firefox (kênh Aurora, v36) - xem jsfiddle.net/mlhDevelopment/gvjy14xu văn bản màu xanh lá cây.

— mlhDev

2

Cá nhân, tôi nghĩ tốt hơn là thay thế overflow-x: scrollbằng overflow: auto. Các thanh cuộn giảm không gian gõ có sẵn trong vùng văn bản. Ngoài ra, IE11 kết xuất một thanh cuộn dọc không cần thiết theo cách của bạn, nhưng đã overflow: autosửa nó.

— Sam

19

Giải pháp dựa trên CSS sau đây hoạt động với tôi:

<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
nguồn

15

Tôi đã tìm ra một cách để tạo ra một vùng văn bản với tất cả điều này hoạt động cùng một lúc:

Với thanh cuộn ngang
Hỗ trợ văn bản đa dòng
Văn bản không gói

Nó hoạt động tốt trên:

Chrome 15.0.874.120
Firefox 7.0.1
Opera 11,52 (1100)
Safari 5.1 (7534.50)
IE 8.0.6001.18702

Hãy để tôi giải thích cách tôi làm điều đó: Tôi đang sử dụng công cụ tích hợp thanh tra Chrome và tôi thấy các giá trị trên các kiểu CSS, vì vậy tôi đã thử các giá trị này, thay vì các giá trị bình thường ... dùng thử & lỗi cho đến khi tôi giảm nó xuống mức tối thiểu và ở đây dành cho bất cứ ai muốn nó.

Trong phần CSS tôi chỉ sử dụng điều này cho Chrome, Firefox, Opera và Safari:

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

Trong phần CSS tôi chỉ sử dụng điều này cho IE:

textarea {
  overflow:scroll;
}

Đó là một chút khó khăn, nhưng có CSS.

Một thẻ (x) HTML như thế này:

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

Và ở cuối <head>phần, một JavaScript như thế này:

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

JavaScript là để làm cho trình xác nhận W3C vượt qua XHTML 1.1 Strict, vì thuộc tính quấn không chính thức và do đó không thể là thẻ HTML (x) trực tiếp, nhưng hầu hết các trình duyệt đều xử lý nó, vì vậy sau khi tải trang, nó đặt thuộc tính đó.

Hy vọng điều này có thể được thử nghiệm trên nhiều trình duyệt và phiên bản hơn và giúp ai đó cải thiện nó và làm cho nó hoàn toàn là trình duyệt chéo cho tất cả các phiên bản.

— z666zz666z
nguồn

4

+1 .wrap = 'off' là phép thuật đã thực hiện thủ thuật trong FF 14.0.1 ... Cảm ơn.

— Tối

JavaScript dường như không hoạt động trên Safari 5.0.6 (phiên bản PPC cuối cùng), mặc dù bạn có thể sử dụng gói = "tắt" trong HTML.

.wrap là những gì đã làm cho tôi, sử dụng Chrome. Tôi cũng đã sử dụng nó kết hợp với css không bọc trong css.

— MineAndCraft12

quấn = 'tắt' khiến IE hoạt động giống như các trình duyệt khác.

— Rand Scullard

4

Câu hỏi này dường như là câu hỏi phổ biến nhất để vô hiệu hóa textareabọc. Tuy nhiên, kể từ tháng 4 năm 2017 tôi thấy rằng IE 11 (11.0.9600) sẽ không vô hiệu hóa gói từ với bất kỳ giải pháp nào ở trên.

Các chỉ giải pháp mà làm việc cho IE 11 là wrap="off". wrap="soft"và / hoặc các thuộc tính CSS khác nhau như white-space: prethay đổi trong đó IE 11 chọn để bọc nhưng nó vẫn bao bọc ở đâu đó. Lưu ý rằng tôi đã kiểm tra điều này có hoặc không có Chế độ xem tương thích . IE 11 tương thích HTML 5, nhưng không phải trong trường hợp này.

Do đó, để đạt được các dòng giữ lại khoảng trắng của chúng và đi ra phía bên tay phải tôi đang sử dụng:

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

Thật tình cờ, điều này dường như cũng hoạt động trong Chrome & Firefox. Tôi không bảo vệ việc sử dụng tiền HTML 5 wrap="off", chỉ nói rằng nó dường như được yêu cầu cho IE 11.

— JonBrave
nguồn

Đẹp một, tiết kiệm trong ngày của tôi! Đã phá vỡ đầu của tôi về lý do tại sao việc thêm các dòng mới không thành công bằng cách sử dụng mã từ câu trả lời được chấp nhận.

— Tum

1

Lỗi IE này cũng đã được chuyển sang Edge

— Jools

3

Nếu bạn có thể sử dụng JavaScript, sau đây có thể là tùy chọn di động nhất hiện nay (đã thử nghiệm Firefox 31, Chrome 36):

một div với contenteditable="true"
phong cách được đề xuất bởi Partly
Gửi biểu mẫu JavaScript trên nút bấm: Làm cách nào để gửi biểu mẫu bằng javascript?

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

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

Dường như không có giải pháp CSS di động tiêu chuẩn:

wrap thuộc tính không chuẩn
white-space: pre;không hoạt động cho Firefox 31 cho textarea. Fiddle , yêu cầu tính năng mở .

Ngoài ra, nếu bạn có thể sử dụng Javascript, bạn cũng có thể sử dụng trình soạn thảo 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>

Có thể hoạt động với ACE vì nó không sử dụng một textareatrong hai điều chưa được xác định / thực hiện không mạch lạc, nhưng không chắc chắn nếu nó được sử dụng contenteditable.

— Ciro Santilli 郝海东冠状病六四
nguồn