Làm thế nào để tăng chiều rộng div theo văn bản bên trong nó?

Question

Tôi có một div mà người dùng nhập văn bản vào đó. Nhưng tôi muốn tăng chiều rộng của nó theo văn bản của nó, cho đến khi tối đa 50% của màn hình. mã CSS của tôi:

.messages { 
    max-width:50%; 
    min-width:150px; 
    background: #ffeec0; 
    padding:2px; 
    margin:3px; 
    -webkit-border-radius: 2px; 
    border-radius: 2px; 
    border:1px solid #ffdd7c; 
} 

Kết quả:

Có rất nhiều không gian sau khi thông báo "555", tôi muốn kích thước này chỉ khi người dùng đầu vào một số văn bản như:

Vì vậy, làm cách nào để tăng chiều rộng của div một cách tối đa, tùy thuộc vào kích thước văn bản?

Answer 1

Có nhiều cách để đạt được điều này, nhưng IMHO sạch nhất là như sau. Vấn đề của bạn là các hộp "tham lam" và sẽ cố gắng mở rộng đến chiều rộng có sẵn.

Để tránh điều này, bạn có thể:

• Làm cho nó "float: left;"
• Nhưng cũng "rõ ràng: bên trái;" để ngăn chặn các phần tử "nổi bên trái" bổ sung để sử dụng không gian có sẵn ở bên phải.

CSS trở thành:

.messages { 
    max-width:50%; 
    min-width:150px; 
    background: #ffeec0; 
    padding:2px; 
    margin:3px; 
    border-radius: 2px; 
    border:1px solid #ffdd7c; 
    float: left; 
    clear: left; 
} 

tôi cung cấp mã đầy đủ và giải thích bổ sung (trên mouseover) trên Liveweave đây: http://liveweave.com/DFCZFj

Answer 2

Thử thay đổi display loại div thành table.

Example Here

.messages { 
    display: table; 
    max-width: 50%; 
    min-width: 150px; 
    /* other declarations omitted due to brevity */ 
} 

Answer 3

Chỉ cần thêm display:inline;. Bạn cũng có thể loại bỏ thuộc tính chiều rộng tối thiểu, nếu không nếu văn bản nhỏ hơn, bạn vẫn sẽ có khoảng trống đó.

Answer 4

yếu tố Block (div 's mặc định loại hiển thị) sẽ cố gắng chiếm không gian ngang tối đa của vùng chứa. Hãy tưởng tượng một ngụ ý width:100% bất cứ khi nào bạn nhìn thấy chúng. inline-block sẽ tạo các phần tử mức khối trong đó phần tử tiếp theo sẽ cố gắng hiển thị theo chiều ngang liền kề (với điều kiện có đủ chỗ). . Đây là những gì bạn muốn sử dụng (display: table sẽ làm việc trong giải pháp này là tốt, nhưng nó có idiosyncrasies riêng của mình tôi tránh chúng

Vì vậy, giải pháp của bạn đòi hỏi phải có ba phần:.

Trước tiên, bạn cần phải xác định rằng các hàng sẽ không lớn hơn 50% diện tích có sẵn Bạn sẽ làm điều này với một khung bên ngoài:..

.frame { 
    max-width:50%; 
} 

Tiếp theo, các thông điệp bản thân mỗi nên được không gian toàn bộ hàng (s) tại một thời điểm vì vậy, chúng tôi sẽ sử dụng thẻ div chưa được đặt trước xung quanh mỗi thư.

Cuối cùng, bạn sẽ sử dụng display: inline-block cho các yếu tố trong cùng của bạn messages. Vì chúng là con duy nhất của thẻ cha, nên bạn sẽ không phải lo lắng về các yếu tố quanh co với nhau. Bằng cách sử dụng khối nội tuyến, chiều rộng được tôn trọng và điều này cho chúng ta một nơi tuyệt vời để áp dụng màu nền.

.messages { 
    display: inline-block; 
    min-width: 150px; 
    background: #ffeec0; 
    padding:2px; 
    margin:3px; 
    -webkit-border-radius: 2px; 
    border-radius: 2px; 
    border:1px solid #ffdd7c; 
} 

Cũng giống như một tài liệu tham khảo, người ta sẽ mong đợi đánh dấu của bạn sẽ trông giống như sau:

<div class="frame"> 
    <div><div class="messages">2014</div></div> 
    <div><div class="messages">2014</div></div> 
    <div><div class="messages"> 
    2014-09-20 17:46:41 minhavidaemquotes:555 
    </div></div> 
    <div><div class="messages"> 
    2014-09-20 17:46:41 minhavidaemquotes:555 this is some extra 
    text 
    </div></div> 
</div> 

Tôi nghĩ rằng bạn sẽ tìm thấy điều này mang đến cho bạn hiệu quả đích. Nhân đây, đây là giải pháp chung - nhưng nếu bạn chọn min-width lớn hơn 50%, bạn sẽ đảm bảo rằng hai anh chị em của loại inline-block sẽ quá rộng cho một dòng. Nếu bạn làm điều này, thì bạn có thể phân chia thêm div trong đánh dấu.