Skracanie CSS przy przepełnieniu tekstu

Question

Wcześniej robiłem to dynamicznie za pomocą JS .. ale otrzymywaliśmy pewne problemy z wydajnością, z których musimy skorzystać z alternatywną opcją.

Teraz obcinam długi tekst na nazwach moich kart, używając stylu przepełnienia tekstu.

ale mam mały problem, jeśli ktoś może go rozwiązać

obecnie to jak mój tekst obcięcie wygląda

Tekst ten został TRUN ...

Tutaj trzy kropki (...) są w kolorze czarnym i chcę je zmienić na czerwony.

Czy istnieje sposób, w jaki możemy to osiągnąć?

Answer 1

Pracuje tutaj:

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

Code (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; 
} 

Końcowe kropki/wielokropki są w kolorze czerwonym na podstawie tego podstawowego CSS.

Answer 2

Zakładam, że chcesz tylko, aby kropki pojawiły się na czerwono? Niestety nie jest to możliwe z prostym css. Jednak znalazłem tutorial, który udaje się zrobić własny styl wielokropka, który będzie wyświetlany tylko wtedy, gdy jest to konieczne:

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

To całkiem miłe siekać i nie jest łatwe do wyjaśnienia w słowach. Może to jsfiddle Zrobiłem może pomóc:

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

Zdjąć overflow: hidden; na .wrap aby zobaczyć co się dzieje. Główną ideą jest to, że div .end przesuwa się na lewe dno w .left-side, gdy tekst jest przepełniony, a gdy nie jest przepełniony, znajduje się na prawym dole .text. Następnie element div .ellipsis jest pozycjonowany bezwzględnie wewnątrz względnego .end, więc po ustawieniu go w prawo jest on widoczny, gdy tekst jest przepełniony i jest przepełniony, gdy tekst nie jest przepełniony! Zabawne, prawda?

W każdym razie, oto kod surowy:

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

Oczywiście, jeśli masz zamiar wdrożyć to, że chcesz usunąć wszystkie granice i tekst "końcowy". Zrobiłem to, by być łatwym do zrozumienia przykładem.Prawdopodobnie również chcesz nadać folię position: absolute;, a następnie nadać jej margin-left: -32px, gdzie szerokość jest równa szerokości .left-side, więc tekst nie będzie miał marginesu po lewej stronie.

Powodzenia!