Menu
Is it possible to style the dots on text-overflow: ellipsis?
An example would be bolding the ellipsis like 'Lorem Ips ...'
562
The 2019 AP Stylebook, which is the dominant style guide for business writing and web writing, recommends that an ellipsis should be treated as a three-letter word. Format an ellipsis as three periods next to each other with a space before the first period and after the last period.
Quite easy thing to do: just add / remove class with text-overflow:ellipsis. JQuery part - basically just removes / adds class cSpanShortText. Highly active question.
If the ellipsis is taking the color of the div, then make the div the color you want the ellipsis to be, and use . color to set the initial text black.
To add an ellipsis in the HTML <span> element having the CSS overflow property set to “hidden”, you need to add the text-overflow property. Use its “ellipsis” value, which will add dots at the end of the content within the <span>.
Inspired by this answer, here is a way of styling the ellipsis. The downsides of this solution are
<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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
