Bhavin Shah Bhavin Shah - 3 months ago 6
CSS Question

Html Button: If a text is not wrapped in the button then there should be "..." after some text

I want my button value to be "Entrepreneurship". Hence it may not be wrapped in the fixed width button. so What I want is, I want my button value to be "Entrepreneu..." Instead of cutting the extra text in button

Here is the image.
I want my button value to be like this if the text doesn't wrap in the button

Thank You.

Answer

You should be using these style and you will get an ellipsis:

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

example below:

.truncate {
  width: 75px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<button class="truncate">Entrepreneurship</button>