Text-wrap Ellipsis on button

Trying to wrap a word inside a button, works with “white-space:normal” on to two lines, but I’d like to wrap with ellipsis if it’s possible?

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

Doesn’t seem to work :confused:

Edit: nor does<button .... text-wrap>



The problem is with the button component, this topic is under discussion Here.

As a workaround what a did was create a class wrap-text

.wrap-text {
    overflow: hidden;
    text-overflow: ellipsis;

Then just add inside your button:

<span class="wrap-text">TEXT FOR YOUR BUTTON</span>