Troncamento del testo Troncamento CSS

Question

In precedenza lo stavo facendo dinamicamente utilizzando JS .. ma stavamo ottenendo alcuni problemi di prestazioni, per i quali dobbiamo venire con un'opzione alternativa.

Ora sto troncando un lungo testo sui nomi delle mie schede usando lo stile di overflow del testo.

ma ho un piccolo problema se qualcuno può risolverlo

Attualmente questo è come la mia troncamento di testo si presenta come

Questo testo è stato trun ...

Qui i tre i punti (...) sono di colore nero e voglio cambiarli in rosso.

C'è un modo per ottenere questo?

Answer 1

lavora qui:

• http://jsfiddle.net/TReRs/4/

codice (HTML & CSS):

<div class="overme"> 
    how much wood can a woodchuck chuck if a woodchuck could chuck wood? 
</div> 

CSS:

.overme { 
    width: 300px; 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow: ellipsis; 
    color: red; 
} 

I punti finali/ellissi sono colorati in rosso utilizzando il CSS di base.

Answer 2

Suppongo che desideri solo che i punti appaiano in rosso? Sfortunatamente questo non è possibile con il semplice css. Tuttavia ho trovato un tutorial che riesce a fare uno stile personalizzato puntini di sospensione, che verrà visualizzato solo quando è necessario:

https://www.mobify.com/dev/multiline-ellipsis-in-pure-css/

E 'piuttosto un bel trucco e non è facile da spiegare a parole. Forse questo jsfiddle ho appena fatto può aiutare a:

http://jsfiddle.net/MyUQJ/9/

Rimuovere il overflow: hidden; sulla .wrap per vedere cosa sta succedendo. L'idea principale è che il div .end si sposti verso il basso a sinistra in .left-side quando il testo è straripante, mentre quando non è straripante si trova nella parte inferiore destra dello .text. Quindi il div .ellipsis è posizionato in modo assoluto all'interno del relativo .end, quindi quando lo posizionate a destra è visibile quando il testo è straripante e sta straripando quando il testo non è straripante! Divertente, non è vero?

Ad ogni modo, ecco il codice grezzo:

HTML:

<div class="wrap"> 
    <div class="left-side"></div> 
    <div class="text"> 
     This is a short story, it 
     doesn't need to be ellipsed. 
    </div> 
    <div class="end"> 
     end 
     <div class="ellipsis">...</div> 
    </div> 
</div> 

<br> 
<br> 
<br> 
<br> 

<div class="wrap"> 
    <div class="left-side"></div> 
    <div class="text"> 
     This is a long story. You won't be able to 
     read the end of this story because it will 
     be to long for the box I'm in. The story is 
     not too interesting though so it's good you 
     don't waste your time on this. 
    </div> 
    <div class="end"> 
     end 
     <div class="ellipsis">...</div> 
    </div> 
</div> 

CSS:

.wrap { 
    height: 100px; 
    width: 234px; 
    border: solid 1px #000; 
    overflow: hidden; 
} 

.left-side { 
    float: left; 
    width: 32px; 
    height: 100px; 
    background: #F00; 
} 

.text { 
    float: right; 
    border: solid 1px #0F0; 
    width: 200px; 
} 

.end { 
    position: relative; 
    float: right; 
    width: 30px; 
    border: solid 1px #00F; 
} 

.ellipsis { 
    position: absolute; 
    top: -25px; 
    left: 198px; 
    background: white; 
    font-weight: bold; 
    color: #F0F; 
} 

Naturalmente, quando hai intenzione di implementare questa che si desidera rimuovere tutte le frontiere e il testo 'fine'. Ho fatto di questo un esempio facile da capire.Probabilmente vorrai anche dare un involucro a e assegnarlo a margin-left: -32px, dove la larghezza è la larghezza per lo .left-side, quindi il tuo testo non avrà un margine sul lato sinistro.

Buona fortuna!