Rileva se un div ha più di una riga

Question

Come posso rilevare se un div ha più di una riga? Voglio dire, in questo modo:

div :multiline { 
    ... 
} 

vorrei formattare il contenuto per quanto riguarda il numero di linee (1 o più)

Answer 1

Se siete disposti a utilizzare JavaScript/JQuery, si potrebbe controllare l'altezza del div e vedere se è maggiore di quello che sarebbe con una sola riga di testo. Certo, questo non è molto a prova di errore, ma non saprei un altro modo.

Answer 2

Non sono sicuro di poterlo gestire con i CSS, ma dovresti essere in grado di farlo con JQuery. Devo ammettere che il mio JQuery non è eccezionale e sono in procinto di impararlo, quindi prendilo con un pizzico di sale. Puoi usare l'altezza della proprietà per trovare l'altezza del div e aggiungere gli stili necessari in base all'altezza del div.

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

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

Answer 3

Non definirei questa soluzione come qualcosa che potrebbe potenzialmente portare a una soluzione. Pensavo che la tua domanda fosse interessante; quindi ho deciso di giocare un po 'con i CSS.

This is what I came up with.

Si utilizza la larghezza corrente interno span (data tramite inline-block display) per determinare la larghezza trattino. Usiamo calc() per rendere il rientro 100% meno la larghezza genitore di 200px a cui è stato aggiunto il nostro rientro finale (30px).

Funziona meglio se il contenuto a linea singola non si avvicina alla larghezza completa del contenitore.

Quick Notes:

1. ho notato alcuni casi di fallimento a causa del contenuto a linea singola avvicinarsi l'intera larghezza del contenitore. (Distanza di grande ampiezza provocando effetti visivi erronee varia tra i browser, testato in Chrome 33, Firefox 25, e Internet Explorer 11)
2. Esso utilizza calc() (list of support)
3. Esso utilizza :before pseudo classe (list of support)
4. Richiede l'uso di un elemento interno inline-block per monitorare la larghezza del contenuto.
5. Richiede che l'elemento padre abbia una larghezza nota.
6. Questo copre solo indentazione che è ciò che Stati OP stanno cercando di ottenere nei commenti del loro post.

codice HTML:

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

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