Metin alanından sözcük kaydırma nasıl kaldırılır?

Question 1

basit metin alanım metin taştığında yatay bir çubuk göstermiyor. Metni yeni bir satıra kaydırır. Öyleyse wordwrap'i nasıl kaldırırım ve metin taştığında yatay çubuğu nasıl görüntülerim?

Question 2

Metin alanları varsayılan olarak kaydırılmamalıdır, ancak kaydırmayı açıkça devre dışı bırakmak için wrap = "soft" değerini ayarlayabilirsiniz:

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

DÜZENLEME: "Kaydırma" özelliği resmi olarak desteklenmiyor. IE 4.0 ve Netscape 2.0'ın desteklediğini söyleyen alman SELFHTML sayfasından (İngilizce bir kaynak burada ) aldım . Ayrıca, beklendiği gibi çalıştığı FF 3.0.7'de de test ettim. Burada işler değişti, SELFHTML artık bir wiki ve İngilizce kaynak bağlantısı öldü.

DÜZENLEME2: Her tarayıcının desteklediğinden emin olmak istiyorsanız, sarma davranışını değiştirmek için CSS kullanabilirsiniz:

Basamaklı Stil Sayfaları (CSS) kullanarak, ile aynı efekti elde edebilirsiniz white-space: nowrap; overflow: auto;. Bu nedenle, sarma niteliği güncelliğini yitirmiş olarak kabul edilebilir.

Gönderen burada (textarea hakkında bilgi ile mükemmel bir sayfa görünüyor).

DÜZENLEME3: Ne zaman değiştiğinden emin değilim (yorumlara göre, 2014 civarında olmuş olmalı), ancak wrapşimdi resmi bir HTML5 özelliği, bkz. W3schools . Cevabı buna uyacak şekilde değiştirdi.

Question 3

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

white-space: nowrapboşlukları umursamıyorsanız da işe yarar, ancak elbette kodla (veya girintili paragraflar veya kasıtlı olarak birden çok boşluk olabilecek herhangi bir içerikle) çalışıyorsanız bunu istemezsiniz ... bu yüzden tercih ederim pre.

overflow-wrap: normal( word-wrapeski tarayıcılarda idi), bazı ebeveynlerin bu ayarı değiştirmesi durumunda gereklidir; preayarlanmış olsa bile sarmaya neden olabilir .

Ayrıca - Şu anda kabul cevap aykırı - textareas do genellikle varsayılan olarak sarın. pre-wraptarayıcımda varsayılan gibi görünüyor.

Question 4

Aşağıdaki CSS tabanlı çözüm benim için çalışıyor:

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

Question 5

Tüm bunların aynı anda çalıştığı bir metin alanı yapmanın bir yolunu buldum:

Yatay kaydırma çubuğu ile
Çok satırlı metni destekleme
Metin kaydırılmıyor

Şunlarda iyi çalışıyor:

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

Buna nasıl ulaştığımı açıklayayım: Chrome denetçisi entegre aracını kullanıyordum ve CSS stillerinde değerler gördüm, bu yüzden normal değerler yerine bu değerleri deniyorum ... minimuma indirene kadar deneme ve hatalar ve işte burada isteyen herkes içindir.

CSS bölümünde sadece bunu Chrome, Firefox, Opera ve Safari için kullandım:

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

CSS bölümünde IE için sadece bunu kullandım:

textarea {
  overflow:scroll;
}

Biraz aldatıcıydı ama CSS var.

Bunun gibi bir (x) HTML etiketi:

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

Ve <head>bölümün sonunda şöyle bir JavaScript:

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

JavaScript, W3C doğrulayıcısının XHTML 1.1 Katı kuralını geçmesini sağlamak içindir, çünkü sarma özelliği resmi değildir ve bu nedenle doğrudan bir (x) HTML etiketi olamaz, ancak çoğu tarayıcı bunu işler, bu nedenle sayfayı yükledikten sonra bu özelliği ayarlar.

Umarım bu daha fazla tarayıcı ve sürümde test edilebilir ve birisinin onu iyileştirmesine yardımcı olur ve tüm sürümler için tamamen çapraz tarayıcı yapar.

Question 6

Bu soru, textareasarmayı devre dışı bırakmak için en popüler soru gibi görünüyor . Ancak, Nisan 2017 itibariyle Bunu bulmak IE 11 (11.0.9600) will not Yukarıdaki çözümlerin herhangi biriyle devre dışı sözcük kaydırma.

Sadece IE 11 için çalışır çözümdür wrap="off". wrap="soft"ve / veya white-space: preIE 11'in sarmayı seçtiği yerde alter gibi çeşitli CSS nitelikleri, ancak yine de bir yere sarılıyor. Bunu Uyumluluk Görünümü ile veya Uyumluluk Görünümü olmadan test ettiğimi unutmayın . IE 11 oldukça HTML 5 uyumludur, ancak bu durumda değil.

Böylece, boşluklarını koruyan ve sağ taraftan çıkan satırları elde etmek için kullanıyorum:

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

Neyse ki bu, Chrome ve Firefox'ta da çalışıyor gibi görünüyor. Ön HTML 5 kullanımını savunmuyorum wrap="off", sadece IE 11 için gerekli gibi göründüğünü söylüyorum.

Question 7

JavaScript kullanabiliyorsanız, günümüzün en taşınabilir seçeneği aşağıdakiler olabilir (Firefox 31, Chrome 36'da test edilmiştir):

ile bir div contenteditable="true"
Partly tarafından önerilen stiller
Düğme tıklandığında JavaScript form gönderimi: JavaScript kullanarak nasıl form gönderilir ?

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

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

Standart, taşınabilir bir CSS çözümü yok gibi görünüyor:

wrap özellik standart değil
white-space: pre;Firefox 31 için çalışmaz textarea. Fiddle , açık özellik isteği .

Ayrıca, Javascript kullanabiliyorsanız, ACE düzenleyicisini de kullanabilirsiniz:

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>

Muhtemelen ACE ile çalışır, çünkü textareayetersiz tanımlanmış / tutarsız bir şekilde uygulanan bir ikisini de kullanmaz , ancak kullanıp kullanmadığından emin değildir contenteditable.