Helpex - Trao đổi & giúp đỡ Đăng nhập
104

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 sử dụng 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ịtràn . Nhưng họ dường như không thực hiện được thủ thuật. Bất cứ điều gì khác tôi có thể đã bỏ lỡ?

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ó? (chỉ sự cố của google-chrome)

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 thêm:

104 hữu ích 1 bình luận 130k xem chia sẻ
177

Để 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 đối với chiều rộng và / hoặc chiều cao của cha mẹ:

textarea {
    max-width: 100%; 
    max-height: 100%;
}
177 hữu ích 5 bình luận chia sẻ
19

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, verticalhorizontal.

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>
Mở rộng đoạn mã

19 hữu ích 1 bình luận chia sẻ
1

Tôi hy vọng bạn đang gặp phải vấn đề tương tự như tôi đã gặp phải ... vấn đề của tôi rất đơn giản: Tạo một vùng 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 khó với tôi, nếu tôi không chính xác thuậ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 lượng không gian. Đâ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 giố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.

1 hữu ích 1 bình luận chia sẻ
0
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.

0 hữu ích 1 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ css google-chrome textarea , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading