CSS - add ellipsis without text-overflow

Question

I am looking to add an ellipsis "..." at the end of the text inside a <div> Is this possible using CSS?

I am aware of text-overflow: ellipsis; but I am not looking to truncate the text. I just want to have "..." at the end of the text.

Fabrizio Calderan · Accepted Answer · 2019-11-28 11:08:33Z

1

You can insert the ellipsis with an after pseudoelement

.ellipsis::after {
  content : "\2026";
}

<div class="ellipsis">Text inside a div</div>

U+2026 is the unicode for the orizontal ellipsis

answered Nov 28, 2019 at 10:58

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1