Why CSS text-overflow: ellipsis not working ?

2 min readJul 2, 2021

Why CSS text-overflow: ellipsis not working ?

Well I have solution for that it only works when the following properties combined together

The element’s width must be in px (pixels). Width in % (percentage) won't work if you want to use % for better user experience I suggest use
width:calc(90%) calc converts % width to pixel, such as calc(90%) width will be equal to 900px width of the container.
The element must have
overflow:hidden
white-space:nowrap
display:inline-block text-overflow:ellipsis width:400px

I’d suggest use display:inline-block, since this will have the minimum collateral impact on your layout if you using inline elements like <span> </span> ; it works very much like the display:inline that it's using currently as far as the layout is concerned, but feel free to experiment with the other points as well, I've tried to give as much info as possible to help you understand how these things interact together. A large part of understanding CSS is about understanding how various styles work together.

<!DOCTYPE html>
<html>
<head>
<style> 
.text-ellipsis {
  width: 100px;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
</head>
<body>
<div>
  <span class="text-ellipsis">Full Length text added with more than 500 characters</span>
<div>
</body>
</html>

Here’s a snippet with code .

Why CSS text-overflow: ellipsis not working ?

Written by surbhi soni