I am looking to truncate a tag in html with ellipsis and to do so it needs to be display: inline-block, block, etc. The problem is that I also have a class on it that contains the css of display: table. The tag is keeping both display styling somehow and will not allow the ellipsis to occur. Why is both display styles allowed instead of one overriding the other?
I understand I could remove the class with the display: table, but I am more curious why it can hold both display styles.
One element can have one display property at a time not two. You can override the style by providing inline style instead like
<div style="display: inline;"> ...</div>
Doing so will override any other style property defined before.