Is it possible to style the dots on text-overflow: ellipsis?
An example would be bolding the ellipsis like 'Lorem Ips ...'
3 Answers
Inspired by this answer, here is a way of styling the ellipsis. The downsides of this solution are
- You have to re-assign your default text-styling
- You need one more
<span>(or what ever) element
.text-overflow { color: blue; font-weight: bold; font-size: 20px; overflow: hidden; text-overflow: ellipsis; width: 100px; white-space: nowrap; } .text-overflow > span { font-weight: normal; color: black; font-size: 14px; }<div class="text-overflow"><span>Here is some very nice text indeed. So this is getting long</span></div>
7 Comments
Praveen Kumar Purushothaman
Looks cool. I don't exactly understand how this works? Can you please explain why doesn't it display when the stuff doesn't have ellipsis?
Nico O
@PraveenKumar that is the whole point of
text-overflow. It's like the normal overflow property, but it's targeted at text nodes that are wider than their parent elements (hence the white-space: nowrap). You can select how the overflowing text should be treated, where one options is to display "..." at the beginning or the end. Here is a mdn article thanks for your reply :)
Dmiters
@PraveenKumar The browser adds
... automatically with the text-overflow: ellipsis; property, so you don't need an ::after.Praveen Kumar Purushothaman
@DmitryNarkevich Wait. I know this. I asked this question like a year ago...
:PDmiters
@PraveenKumar oops haha didn't see the date
|
I would recommend using :after but this might also replace for those without ellipsis.
.truncate { width: 250px; white-space: nowrap; overflow: hidden; position: relative; } .truncate::after { display: block; font-weight: bold; content: "..."; position: absolute; bottom: 0; right: 0; background: #fff; }<div class="truncate">You may be starting to notice a trend from my recent articles here on HTML5 Hub. I’m a JS snob by trade, but by association I have to deal with my fair share of CSS issues. So, as an “outsider” looking in, I’m taking this opportunity to highlight some of the big “pain points” that CSS causes for various basic tasks in web dev. It’s not really intended as a criticism of the technology per se, but more a rallying cry to ask for standard solutions which remove our hacks.</div>Not a hack-proof way, but my few cents.
2 Comments
allejo
Only issue with this approach is that it'll add "..." even if nothing is being truncated
Praveen Kumar Purushothaman
@allejo Yep you are right...
:( That's why I told not a hackproof way!Another way is to use a wrapper with a span element like so:
.text-overflow { font-size: 40px; overflow: hidden; text-overflow: ellipsis; width: 200px; white-space: nowrap; } .style-text { font-size: 20px; }<div class="text-overflow"> <span class="style-text"> text that is styled and styled and styled </span> </div>
::after.