Nascondi testo se non rientra in una riga con CSS

Question

Ho un elemento div che contiene del testo. Questo elemento ha una larghezza fissa. Se il testo è così lungo da non poter essere contenuto in una riga, voglio nascondere quel testo (l'intero testo, non solo le righe extra). Altrimenti mostra il testo.

Questo può essere fatto con i CSS?

L'aggiunta di alcuni elementi aggiuntivi in ​​html che possono aiutare a ottenere questo risultato è accettabile.

Answer 1

1. Inserire il testo in un involucro interno del blocco interno con white-space: nowrap per evitare interruzioni di riga.
2. Inserire uno pseudoelemento blocco inline vuoto prima di quello inner-wrapper.
3. Quando l'involucro interno è più largo dell'involucro esterno, verrà spostato nella seconda riga dell'involucro esterno.
4. Per nascondere utilizzare overflow: hidden e impostare lo stesso valore su height e line-height.

.outer-wrapper { 
 
    overflow: hidden; 
 
    height: 1.2em; 
 
    line-height: 1.2em; 
 
    border: 1px dotted black; 
 
    margin: 1em; 
 
} 
 
.outer-wrapper::before { 
 
    content: ''; 
 
    display: inline-block; 
 
} 
 
.inner-wrapper { 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
}

<div class="outer-wrapper"> 
 
    <div class="inner-wrapper"> 
 
    this is a short line 
 
    </div> 
 
</div> 
 
<div class="outer-wrapper"> 
 
    <div class="inner-wrapper"> 
 
    this is a super long line of text that it is never ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever going to fit on a single line! 
 
    </div> 
 
</div>

Answer 2

Se si desidera nascondere il testo in più, si può fare qualcosa di simile:

div { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    max-width: 50em; 
 
    border: 1px dotted black; 
 
}

<p><br><br></p> 
 

 
<div> 
 
    this is a super long line of text that it is never ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever going to fit on a single line! 
 
</div>

Se si desidera nascondere completamente l'intero elemento, è necessario utilizzare JavaScript. Il CSS non ha modo di "rilevare" se il testo è troppo lungo.