Aggiungere punti/ellissi su overflow di elemento div/span senza usare jquery

Question

È necessario implementare funzionalità simili a ciò dotdotdot jQuery plug-in fa ma non è possibile utilizzare i framework javascript (come jquery o ext).

C'è un modo semplice per aggiungere i punti al contenuto dell'elemento div o span se il contenuto richiede più spazio quindi l'elemento dovrebbe ??? (simile a quello che css overflow: puntini di sospensione impostazione fa)

Impossibile utilizzare puntini di sospensione beacause non funziona con molte linee quando l'altezza è limitata.

Grazie :)

Answer 1

La mia soluzione al mio problema può sembrare un po 'imbarazzante, ma funziona per me :)

ho usato un po' di CSS:

word-wrap: break-word; 

e Javascript:

var spans = document.getElementsByTagName("span"); 
for (var i in spans) { 
    var span = spans[i]; 
    if (/*some condition to filter spans*/) { // just 
     if (navigator.appName == 'Microsoft Internet Explorer') { 
      span.parentNode.style.display ='inline-block'; 
     } 
     if (span.parentNode.clientHeight > 50) { 
      span.innerHTML = span.innerHTML.substr(0, 26) + ' ...'; 
     } 
    } 
} 

Answer 2

Si potrebbe provare:

text-overflow: ellipsis; 
-o-text-overflow: ellipsis; 

Questo funziona solo se gli elementi non sono dimensionati in modo dinamico. Dovranno avere un set di larghezza o qualche altro meccanismo per impedire loro di crescere per consentire più contenuti.

Answer 3

Perché non utilizzare l'overflow di testo della proprietà CSS? Funziona benissimo se si definisce una larghezza nel tag.

Classe in CSS:

.clipped { 
 
     overflow: hidden; 
 
     white-space: nowrap; 
 
     text-overflow: ellipsis; 
 
    } 
 

<div class="clipped" style="width: 100px;" title="This is a long text">This is a long text<div>

È inoltre possibile aggiungere il testo per l'attributo title, così l'utente può vedere l'intero testo quando si libra sopra l'elemento.

Answer 4

PER TUTTI Browser:

.dotdot{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width:80px} 
.dotdot:before { content: '';} 

<div class="dotdot">[Button Text Goes here][1]</div> 

Answer 5

Funziona per qualsiasi numero di linee e qualsiasi larghezza senza javascript ed è reattivo. È sufficiente impostare l'altezza massima su un multiplo dell'altezza della linea: ad esempio (altezza della linea 22px) * (max 3 righe di testo) = (altezza massima 66 px).

https://codepen.io/freer4/pen/prKLPy

html, body, p { margin: 0; padding: 0; font-family: sans-serif;line-height:22px;} 
 

 
.ellipsis{ 
 
    overflow:hidden; 
 
    margin-bottom:1em; 
 
    position:relative; 
 
} 
 

 
.ellipsis:before { 
 
    content: "\02026"; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right:0; 
 
    width: 1.8em; 
 
    height:22px; 
 
    margin-left: -1.8em; 
 
    padding-right: 5px; 
 
    text-align: right; 
 
    background-size: 100% 100%; 
 
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 40%, white); 
 
    z-index:2; 
 
} 
 
.ellipsis::after{ 
 
    content:""; 
 
    position:relative; 
 
    display:block; 
 
    float:right; 
 
    background:#FFF; 
 
    width:3em; 
 
    height:22px; 
 
    margin-top:-22px; 
 
    z-index:3; 
 
} 
 

 
/*For testing*/ 
 
.ellipsis{ 
 
    max-width:500px; 
 
    text-align:justify; 
 
} 
 
.ellipsis-3{ 
 
    max-height:66px; 
 
} 
 

 
.ellipsis-5{ 
 
    max-height:110px; 
 
}

<div class="ellipsis ellipsis-3"> 
 
    <p>Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to.</p> 
 
</div> 
 

 
<div class="ellipsis ellipsis-5"> 
 
    <p>The number of lines shown is easily controlled by setting the max-height of the .ellipsis element. The downsides are the requirement of a wrapping element, and that if the text is precisely as long as your number of lines, you'll get a white area covering the very trailing end of your text. You've been warned. This is just some pushing text to make the element longer. See the ellipsis? Yay.</p> 
 
</div>