ฉันจะป้องกันไม่ให้ textarea ขยายเกินองค์ประกอบ DIV หลักได้อย่างไร (ปัญหา google-chrome เท่านั้น)

ฉันจะป้องกันไม่ให้พื้นที่ข้อความขยายเกินองค์ประกอบ DIV หลักได้อย่างไร

ฉันมีพื้นที่ข้อความนี้อยู่ในตารางซึ่งอยู่ภายใน DIV และดูเหมือนว่ามันจะทำให้ทั้งตารางยืดออกไปนอกขอบเขต

คุณสามารถดูตัวอย่างของสถานการณ์เดียวกันได้แม้ในกรณีที่ง่ายกว่านั้นเพียงแค่ใส่พื้นที่ข้อความภายใน div (เช่นสิ่งที่ใช้ที่นี่ใน www.stackoverflow.com)

คุณสามารถดูได้จากภาพด้านล่างว่า textarea สามารถขยายได้เกินขนาดของแม่หรือไม่? ฉันจะป้องกันสิ่งนี้ได้อย่างไร?

ฉันยังใหม่กับ CSS ดังนั้นฉันจึงไม่รู้จริงๆว่าควรใช้แอตทริบิวต์ CSS อะไร ฉันพยายามหลายประการเช่นการแสดงผลและล้น แต่ดูเหมือนพวกเขาจะไม่ทำเคล็ดลับ มีอะไรอีกบ้างที่ฉันอาจพลาดไป?

อัปเดต: HTML

CSS

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

หากคุณใส่รหัสนี้ไว้ในhttp://jsfiddle.netคุณจะเห็นว่ารหัสเหล่านี้ทำงานแตกต่างกัน แม้ว่า textarea จะถูก จำกัด ไว้ที่เปอร์เซ็นต์ที่ประกาศในรูปแบบ css แต่ก็ยังสามารถทำให้ตารางพาเรนต์มีขนาดใหญ่เท่าที่ต้องการได้จากนั้นคุณจะเห็นว่ามันล้นออกมาเหนือเส้นขอบพาเรนต์ มีความคิดเกี่ยวกับวิธีแก้ไขปัญหานี้หรือไม่?

ในการปิดใช้งานการปรับขนาดโดยสมบูรณ์:

textarea {
    resize: none;
}

วิธีอนุญาตให้ปรับขนาดตามแนวตั้งเท่านั้น:

textarea {
    resize: vertical;
}

วิธีอนุญาตให้ปรับขนาดแนวนอนเท่านั้น:

textarea {
    resize: horizontal;
}

หรือคุณสามารถ จำกัด ขนาด:

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

วิธี จำกัด ขนาดให้เท่ากับความกว้างและ / หรือความสูงของผู้ปกครอง:

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

การควบคุมการปรับขนาด Textareaพร้อมใช้งานผ่านคุณสมบัติการปรับขนาด CSS3 :

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

ค่าที่อนุญาตอธิบายตนเอง: none(พิการ textarea ปรับขนาด) both, และ verticalhorizontal

สังเกตว่าใน Chrome, Firefox และ Safari ค่าเริ่มต้นคือbothเริ่มต้นคือ

หากคุณต้องการ จำกัด กว้างและความสูงขององค์ประกอบ textarea ที่ไม่เกิดปัญหา: เบราว์เซอร์เหล่านี้ยังเคารพmax-height, max-width, min-heightและmin-widthคุณสมบัติ CSS เพื่อให้การปรับขนาดภายในบางสัดส่วน

ตัวอย่างโค้ด :

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

ฉันหวังว่าคุณจะประสบปัญหาเดียวกันกับที่ฉันมี ... ปัญหาของฉันนั้นง่ายมาก: สร้างพื้นที่ข้อความคงที่โดยมีเปอร์เซ็นต์ที่ถูกล็อคไว้ภายในคอนเทนเนอร์ (ฉันเพิ่งเริ่มใช้ CSS / JS / HTML ดังนั้นโปรดอดทนกับฉันถ้าฉัน ไม่เข้าใจศัพท์แสง) ดังนั้นไม่ว่าจะแสดงอุปกรณ์ใดกล่องที่บรรจุคอนเทนเนอร์ (เซลล์ตาราง) จะใช้พื้นที่ในปริมาณที่ถูกต้อง นี่คือวิธีที่ฉันแก้ไข:

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

แล้ว CSS จะเป็นแบบนี้ ...

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

ขออภัยสำหรับบล็อกโค้ดที่ไม่สมบูรณ์ที่นี่ แต่ฉันต้องแสดงให้คุณเห็นว่าอะไรสำคัญและฉันไม่รู้วิธีแทรกโค้ด CSS ที่ยกมาในเว็บไซต์นี้ ไม่ว่าในกรณีใดเพื่อให้แน่ใจว่าคุณเห็นสิ่งที่ฉันกำลังพูดถึง CSS ที่สำคัญจะมีการเยื้องน้อยลงที่นี่ ...

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

จริงอยู่ฉันคิดว่า "resize: none;" มากเกินไป แต่ก็ปลอดภัยดีกว่าเสียใจและตอนนี้ผู้บริโภคจะไม่มีการปรับขนาดกล่องต่อไปและไม่สำคัญว่าพวกเขากำลังดูจากอุปกรณ์ใด

มันใช้งานได้ดี

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

กำหนดความกว้างและความสูงที่คุณต้องการสำหรับพื้นที่ข้อความจากนั้นใช้ ปรับขนาด: ไม่มี; css ซึ่งจะปิดใช้งานคุณสมบัติที่ยืดได้ของ textarea