Phát hiện xem div có nhiều hơn một dòng

Question

Làm cách nào để phát hiện xem div có nhiều hơn một dòng không? Ý tôi là như thế này:

div :multiline { 
    ... 
} 

Tôi muốn để định dạng nội dung liên quan đến số lượng dòng (1 hoặc nhiều)

Answer 1

Nếu bạn sẵn sàng để sử dụng Javascript/JQuery, bạn có thể kiểm tra chiều cao của div và xem nếu nó lớn hơn nó sẽ chỉ với một dòng văn bản. Tất nhiên, điều này không phải là rất lỗi, nhưng tôi sẽ không biết cách nào khác.

Answer 2

Tôi không chắc liệu bạn có thể quản lý điều này bằng CSS hay không nhưng bạn có thể thực hiện điều này với JQuery. Tôi phải thừa nhận rằng JQuery của tôi không phải là tuyệt vời và tôi đang trong quá trình học nó, vì vậy hãy mang nó với một chút muối. Bạn có thể sử dụng chiều cao của thuộc tính để tìm chiều cao của div và thêm các kiểu cần thiết dựa trên chiều cao của div.

$("div").ready( 
    function test(event) { 
    var heightOfDiv = $(document).height(); 

    if (heightOfDiv > 15){ 
    $("div").css({ 
    backgroundColor: "green" 
    });} 
} 
); 

Answer 3

Tôi sẽ không gọi đây là giải pháp nhiều nhất có thể dẫn đến giải pháp. Tôi nghĩ câu hỏi của bạn rất thú vị; vì vậy tôi quyết định chơi với CSS một chút.

This is what I came up with.

Nó sử dụng rộng hiện tại của nội span (được thông qua inline-block hiển thị) để xác định chiều rộng thụt lề. Chúng tôi sử dụng calc() để làm cho thụt lề 100% trừ chiều rộng gốc của 200px có thụt lề cuối cùng của chúng tôi được thêm vào nó (30px).

Nó hoạt động tốt nhất nếu nội dung một dòng không đạt gần chiều rộng đầy đủ của vùng chứa.

Ghi chú nhanh:

1. tôi đã lưu ý một số trường hợp thất bại do nội dung đơn dòng nhận được gần toàn bộ chiều rộng của thùng sơn. (Khoảng cách từ đầy đủ chiều rộng gây hình ảnh sai lầm khác nhau giữa các trình duyệt, kiểm tra trong Chrome 33, Firefox 25, và Internet Explorer 11)
2. Nó sử dụng calc() (list of support)
3. Nó sử dụng :before giả lớp (list of support)
4. Nó yêu cầu sử dụng phần tử nội bộ inline-block để theo dõi chiều rộng nội dung.
5. Yêu cầu phần tử gốc phải có chiều rộng đã biết.
6. Điều này chỉ bao gồm thụt đầu dòng là những gì OP Hoa họ đang cố gắng đạt được trong các ý kiến ​​của bài đăng của họ.

HTML Code:

<h1>Success Cases</h1> 
<p><span class="indent">Single line Single line</span></p> 
<p><span class="indent">The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</span></p> 
<h1>Failure Cases</h1> 
<p><span class="indent">Single line Single line Single 1</span></p> 
<p><span class="indent">Single line Single line Single line</span></p> 

Mã CSS:

p { 
    background-color: #ccc; 
    margin: 10px; 
    width: 200px; 
} 

p > .indent { 
    display: inline-block; 
} 
p > .indent:before { 
    background-color: red; 
    content: ""; 
    float: left; 
    width: calc(100% - 200px + 30px); 
    height: 1em; 
}