Bagaimana cara mencegah textarea meregang di luar elemen DIV induknya? (masalah google-chrome saja)

Bagaimana cara mencegah textarea meregang di luar elemen DIV induknya?

Saya memiliki textarea ini di dalam tabel yang ada di dalam DIV dan tampaknya itu menyebabkan seluruh tabel meregang di luar batasnya.

Anda dapat melihat contoh situasi yang sama bahkan dalam kasus yang lebih sederhana, cukup dengan meletakkan area teks di dalam div (seperti yang digunakan di sini di www.stackoverflow.com)

Anda dapat melihat dari gambar di bawah ini bahwa textarea dapat melampaui ukuran induknya? Bagaimana cara mencegahnya?

Saya agak baru mengenal CSS jadi saya tidak benar-benar tahu atribut CSS apa yang harus saya gunakan. Saya mencoba beberapa tampilan seperti , dan melimpah . Tapi mereka sepertinya tidak berhasil. Ada lagi yang mungkin saya lewatkan?

UPDATE: HTML

CSS

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

Jika Anda meletakkan kode ini di dalam http://jsfiddle.net , Anda akan melihat bahwa mereka bertindak berbeda. Meskipun textarea dibatasi pada persentase yang dideklarasikan dalam gaya cssnya, masih memungkinkan untuk membuatnya menyebabkan tabel induknya menjadi sebesar yang diinginkan, dan kemudian Anda dapat melihat bahwa itu tumpah melewati batas induknya. Ada pemikiran tentang cara memperbaikinya? </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> orang </s>

Untuk menonaktifkan pengubahan ukuran sepenuhnya:

textarea {
    resize: none;
}

Untuk mengizinkan hanya pengubahan ukuran vertikal:

textarea {
    resize: vertical;
}

Untuk mengizinkan hanya pengubahan ukuran horizontal:

textarea {
    resize: horizontal;
}

Atau Anda dapat membatasi ukuran:

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

Untuk membatasi ukuran pada lebar dan / atau tinggi orang tua:

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

Kontrol pengubahan ukuran area teks tersedia melalui properti pengubahan ukuran CSS3 :

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

Nilai yang diizinkan cukup jelas: none(menonaktifkan pengubahan ukuran area teks) both,, verticaldan horizontal.

Perhatikan bahwa di Chrome, Firefox dan Safari defaultnya adalah both.

Jika Anda ingin membatasi lebar dan tinggi dari elemen textarea, itu tidak masalah: browser ini juga menghormati max-height, max-width, min-height, dan min-widthsifat CSS untuk memberikan Resize dalam proporsi tertentu.

Contoh kode :

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

Saya berharap Anda mengalami masalah yang sama dengan yang saya alami ... masalah saya sederhana: Buat textarea tetap dengan persentase terkunci di dalam penampung (saya baru mengenal CSS / JS / HTML, jadi bersabarlah, jika saya jangan gunakan istilah yang benar) sehingga apa pun perangkat yang digunakan untuk menampilkannya, kotak yang mengisi wadah (sel tabel) menggunakan jumlah ruang yang benar. Inilah cara saya menyelesaikannya:

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

Kemudian CSS Terlihat seperti ini ...

#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;
}

Maaf atas blok kode yang ceroboh di sini, tetapi saya harus menunjukkan kepada Anda apa yang penting dan saya tidak tahu cara memasukkan kode CSS yang dikutip di situs web ini. Bagaimanapun, untuk memastikan Anda melihat apa yang saya bicarakan, CSS yang penting tidak terlalu menjorok ke sini ...

Apa yang kemudian saya lakukan (seperti yang ditunjukkan di sini) sangat khusus mengubah persentase sampai saya menemukan yang bekerja dengan sempurna agar sesuai dengan tampilan, tidak peduli layar perangkat apa yang digunakan.

Memang, saya pikir "resize: none;" berlebihan, tetapi lebih baik aman daripada menyesal dan sekarang konsumen tidak perlu mengubah ukuran kotak, juga tidak masalah dari perangkat apa mereka melihatnya.

Ini bekerja dengan baik.

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

tetapkan lebar dan tinggi yang Anda butuhkan untuk area teks dan kemudian gunakan. ubah ukuran: tidak ada; css yang akan menonaktifkan properti textarea yang dapat direntangkan.