Metin alanının üst DIV öğesinin ötesine geçmesini nasıl engelleyebilirim? (yalnızca google-chrome sorunu)

Metin alanının üst DIV öğesinin ötesine geçmesini nasıl engelleyebilirim?

Bu metin alanı bir DIV içindeki bir tablonun içinde var ve görünüşe göre tüm tablonun sınırlarının dışına çıkmasına neden oluyor.

Daha basit bir durumda bile aynı durumun bir örneğini görebilirsiniz, sadece bir div içine bir metin alanı koyarak (burada www.stackoverflow.com'da kullanılan gibi)

Aşağıdaki resimlerden, metin alanının üstünün boyutunun ötesine geçebileceğini görebiliyor musunuz? Bunu nasıl önleyebilirim?

CSS'de biraz yeniyim, bu yüzden hangi CSS özelliklerini kullanmam gerektiğini gerçekten bilmiyorum. Birkaç tane görüntüleme ve taşma denedim . Ama hile yapmıyorlar. Kaçırmış olabileceğim başka bir şey var mı?

GÜNCELLEME: HTML

CSS

textarea {
    max-width: 50%;
}
#container {
    width: 80%;
    border: 1px solid red;
}    
#cont2{
    width: 60%;
    border: 1px solid blue;
} ​

Bu kodu http://jsfiddle.net içine koyarsanız , farklı davrandıklarını göreceksiniz. Metin alanı, css stilinde belirtilen yüzde ile sınırlı olsa da, üst tablonun istediği kadar büyük olmasına neden olması hala mümkündür ve sonra üst sınırının üzerine taştığını görebilirsiniz. Bunu nasıl düzelteceğine dair herhangi bir fikrin var mı?

Yeniden boyutlandırmayı tamamen devre dışı bırakmak için:

textarea {
    resize: none;
}

Yalnızca dikey yeniden boyutlandırmaya izin vermek için:

textarea {
    resize: vertical;
}

Yalnızca yatay yeniden boyutlandırmaya izin vermek için:

textarea {
    resize: horizontal;
}

Veya boyutu sınırlayabilirsiniz:

textarea {
    max-width: 100px; 
    max-height: 100px;
}

Boyutu ebeveyn genişliği ve / veya boyuyla sınırlamak için:

textarea {
    max-width: 100%; 
    max-height: 100%;
}

Metin alanı yeniden boyutlandırma kontrolü , CSS3 yeniden boyutlandırma özelliği aracılığıyla kullanılabilir :

textarea { resize: both; } /* none|horizontal|vertical|both */
textarea.resize-vertical{ resize: vertical; }
textarea.resize-none { resize: none; }

İzin verilen değerler kendinden açıklamalı: none(metin alanı yeniden boyutlandırmayı devre dışı bırakır) both, verticalve horizontal.

Dikkat Chrome, Firefox ve Safari'de varsayılan olduğunu both.

Eğer textarea elemanı genişliğini ve yüksekliğini sınırlamak istiyorsanız, bu bir sorun değil: bu tarayıcılar da saygı max-height, max-width, min-heightve min-widthbelli oranlar içinde yeniden boyutlandırma sağlamak için CSS özelliklerini.

Kod örneği :

#textarea-wrapper {
  padding: 10px;
  background-color: #f4f4f4;
  width: 300px;
}

#textarea-wrapper textarea {
  min-height:50px;
  max-height:120px;
  width: 290px;
}

#textarea-wrapper textarea.vertical { 
  resize: vertical;
}

<div id="textarea-wrapper">
  <label for="resize-default">Textarea (default):</label>
  <textarea name="resize-default" id="resize-default"></textarea>
  
  <label for="resize-vertical">Textarea (vertical):</label>
  <textarea name="resize-vertical" id="resize-vertical" class="vertical">Notice this allows only vertical resize!</textarea>
</div>

Sana aynı sorunu yaşıyor umuyorum vardı benim sorun basitti ...: kabın içine kilitli yüzdeleri ile sabit textarea olun (Yanımda ayı yüzden, eğer, CSS / JS / HTML yeniyim ben dili doğru anlamayın), böylece görüntülediği cihaz ne olursa olsun, kabı dolduran kutu (masa hücresi) doğru miktarda yer kaplar. İşte bunu nasıl çözdüm:

<table width=100%>
    <tr class="idbbs">
        B.S.:
    </tr></br>
    <tr>
        <textarea id="bsinpt"></textarea>
    </tr>
</table>

Sonra CSS şuna benziyor ...

#bsinpt
{
    color: gainsboro;
    float: none;
    background: black;
    text-align: left;
    font-family: "Helvetica", "Tahoma", "Verdana", "Arial Black", sans-serif;
    font-size: 100%;
  position: absolute;
  min-height: 60%;
  min-width: 88%;
  max-height: 60%;
  max-width: 88%;
  resize: none;
    border-top-color: lightsteelblue;
    border-top-width: 1px;
    border-left-color: lightsteelblue;
    border-left-width: 1px;
    border-right-color: lightsteelblue;
    border-right-width: 1px;
    border-bottom-color: lightsteelblue;
    border-bottom-width: 1px;
}

Buradaki özensiz kod bloğu için özür dilerim, ancak size neyin önemli olduğunu göstermem gerekiyor ve bu web sitesine alıntılanmış CSS kodunu nasıl ekleyeceğimi bilmiyorum. Her durumda, neden bahsettiğimi görmenizi sağlamak için, önemli CSS burada daha az girintilidir ...

Daha sonra yaptığım şey (burada gösterildiği gibi), hangi cihaz ekranı kullanılırsa kullanılsın, ekrana mükemmel şekilde uyanları bulana kadar yüzdeleri çok özel bir şekilde ayarlamak.

Verilmiş, sanırım "yeniden boyutlandır: yok;" fazla öldürüyor, ancak üzgün olmaktan daha güvenli ve artık tüketicilerin kutuyu yeniden boyutlandırması gerekmeyecek, ne de onu hangi cihazdan görüntüledikleri önemli değil.

Harika çalışıyor.

textarea {
width: 700px;  
height: 100px;
resize: none; }

textarea için gerekli genişlik ve yüksekliği atayın ve ardından kullanın. yeniden boyutlandırma: yok; textarea'nın gerilebilir özelliğini devre dışı bırakacak css özelliği.