CSS Override text-overflow: ellipsis

Question

ellipsis will add '...' to text by default if we have 'text-overflow: ellipsis', but my scenario i need to overide this by two stars * *. How we can achieve this is Pure CSS?

Note: It should support All browsers like IE9+ and chrome

As some peoples asking example adding this, http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

For doing this you need javascript. Its not possible with pure css — priya_singh
– priya_singh, Commented Dec 26, 2016 at 13:29
@priya_singh: Expecting CSS workaround. Hoping some CSS experts will help me — Muthukumar Jayamurugan
– Muthukumar Jayamurugan, Commented Dec 26, 2016 at 13:30
This will not really work exactly as the css's ellipsis feature, but it can give you a hint of how to create something similar: jsfiddle.net/dekelb/vuxfk0hk — Dekel
– Dekel, Commented Dec 26, 2016 at 13:39

Saurav Rastogi · Accepted Answer · 2016-12-26 14:00:08Z

5

You can apply a trick using pseudo elements like :after.

Have a look at the snippet below:

#div1 {
  position: relative;
  white-space: nowrap; 
  width: 99px; 
  overflow: hidden;
  text-overflow: ellipsis; 
  border: 1px solid #000000;
}

#div1:after {
  content: '**';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: #fff;
  padding: 0 2px 0 0;
}

<p>This div uses "text-overflow:ellipsis":</p>
<div id="div1">This is some long text that will not fit in the box</div>

Hope this helps!

edited Dec 26, 2016 at 14:00

answered Dec 26, 2016 at 13:38

Saurav Rastogi

9,7313 gold badges32 silver badges42 bronze badges

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

6 Comments

Muthukumar Jayamurugan Over a year ago

Change width: 99px; character cutted to half

Saurav Rastogi Over a year ago

@LearnReact Updated the answer. Try it now.

Muthukumar Jayamurugan Over a year ago

Sorry bro, Can you check with width: 89px; it is breaking

Dekel Over a year ago

The :after pseudo class will not work the same as the ellipsis. You will have to check if you have enough content to cut&display the ellipsis, and you can't really do this with the :after pseudo class.

Saurav Rastogi Over a year ago

@LearnReact I agree with Dekel. This will not work as same as ellipsis. This is just a trick to override ellipsis.

|

Collectives™ on Stack Overflow

CSS Override text-overflow: ellipsis

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related