Làm cách nào để ngăn textarea vượt ra ngoài phần tử DIV chính của nó? (chỉ sự cố của google-chrome)

Làm cách nào để ngăn textarea vượt ra ngoài phần tử DIV chính của nó?

Tôi có vùng văn bản này bên trong một bảng bên trong DIV và có vẻ như nó khiến toàn bộ bảng kéo dài ra ngoài giới hạn của nó.

Bạn có thể xem một ví dụ về tình huống tương tự ngay cả trong một trường hợp đơn giản hơn, chỉ cần đặt một vùng văn bản bên trong một div (như những gì được sử dụng ở đây trong www.stackoverflow.com)

Bạn có thể thấy từ những hình ảnh dưới đây rằng vùng chữ có thể kéo dài ra ngoài kích thước của vùng cha mẹ của nó? Làm cách nào để ngăn chặn điều này?

Tôi là người mới làm quen với CSS nên tôi không thực sự biết mình nên sử dụng thuộc tính CSS nào. Tôi đã thử một số như hiển thị và tràn . Nhưng họ dường như không làm được điều đó. Bất cứ điều gì khác tôi có thể đã bỏ lỡ?

CẬP NHẬT: HTML

CSS

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

Nếu bạn đặt mã này bên trong http://jsfiddle.net , bạn sẽ thấy rằng chúng hoạt động khác nhau. Mặc dù textarea bị giới hạn ở tỷ lệ phần trăm được khai báo trong kiểu css của nó, nhưng vẫn có thể khiến nó làm cho bảng mẹ của nó lớn như ý muốn và sau đó bạn có thể thấy rằng nó tràn qua đường viền mẹ của nó. Có bất kì ý tưởng gì để sửa chữa việc này chưa? Các bác sĩ cho biết:

Để tắt hoàn toàn việc thay đổi kích thước:

textarea {
    resize: none;
}

Để chỉ cho phép thay đổi kích thước theo chiều dọc:

textarea {
    resize: vertical;
}

Để chỉ cho phép thay đổi kích thước theo chiều ngang:

textarea {
    resize: horizontal;
}

Hoặc bạn có thể giới hạn kích thước:

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

Để giới hạn kích thước cho chiều rộng và / hoặc chiều cao của cha mẹ:

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

Kiểm soát thay đổi kích thước Textarea khả dụng thông qua thuộc tính thay đổi kích thước CSS3 :

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

Các giá trị được phép tự giải thích: none(tắt thay đổi kích thước vùng văn bản) both, verticalvà horizontal.

Lưu ý rằng trong Chrome, Firefox và Safari, mặc định là both.

Nếu bạn muốn hạn chế chiều rộng và chiều cao của phần tử textarea, đó không phải là một vấn đề: những trình duyệt này cũng tôn trọng max-height, max-width, min-height, và min-widthcác thuộc tính CSS để cung cấp thay đổi kích thước trong phạm vi tỷ lệ nhất định.

Ví dụ về mã :

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

Tôi hy vọng bạn đang gặp phải vấn đề giống như tôi đã gặp phải ... vấn đề của tôi rất đơn giản: Tạo một vùng chứa văn bản cố định với tỷ lệ phần trăm bị khóa bên trong vùng chứa (Tôi là người mới sử dụng CSS / JS / HTML, vì vậy hãy chịu đựng tôi, nếu tôi không sai biệt ngữ) để cho dù thiết bị đó đang hiển thị trên thiết bị nào, ô lấp đầy vùng chứa (ô trong bảng) sẽ chiếm đúng dung lượng. Đây là cách tôi đã giải quyết nó:

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

Sau đó, CSS trông như thế này ...

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

Xin lỗi vì khối mã cẩu thả ở đây, nhưng tôi phải cho bạn thấy điều quan trọng và tôi không biết cách chèn mã CSS được trích dẫn trên trang web này. Trong mọi trường hợp, để đảm bảo bạn thấy những gì tôi đang nói đến, CSS quan trọng ít được thụt lề hơn ở đây ...

Những gì tôi đã làm sau đó (như được hiển thị ở đây) là tinh chỉnh tỷ lệ phần trăm rất cụ thể cho đến khi tôi tìm thấy tỷ lệ phần trăm hoạt động hoàn hảo để vừa với màn hình, bất kể màn hình thiết bị nào được sử dụng.

Được, tôi nghĩ rằng "thay đổi kích thước: không có;" là quá mức cần thiết, nhưng an toàn hơn là xin lỗi và bây giờ người tiêu dùng sẽ không phải thay đổi kích thước hộp, cũng không quan trọng họ đang xem nó từ thiết bị nào.

Nó hoạt động tuyệt vời.

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

chỉ định chiều rộng và chiều cao cần thiết của bạn cho vùng văn bản và sau đó sử dụng. thay đổi kích thước: không có; thuộc tính css sẽ vô hiệu hóa thuộc tính co dãn của textarea.