Text in Button (CSS)

Question

I want to customize my button, which has a long text on it.
When I hover on the button, I want that long text to wrap in 2 or 3 lines so that more text is visible on the button. Along with that, I want the rest of the text to be ellipsed.
somewhat like this:-

original text:

This is a long text which (on hover) I want to wrap inside the button and show it in 3 lines, ending with ellipsis

text in button (with fixed width of 250px):

This is a long text which (on hover)...

text in button on hover (button height increases ):

This is a long text which (on hover) I want to wrap inside the button and show it in 3 lines, ending with e...

I have made a Plunkr in angularjs using md-button of angular-material.
Since I am not good at CSS, I am having trouble in customizing my button.

score 4 · Answer 1 · edited May 23 '17 at 12:00

button {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 250px;
  white-space: nowrap;
}

button:hover {
  overflow: auto;
  text-overflow: none;
  white-space: normal;
}

<button>
This is a long text which (on hover) I want to wrap inside the button and show it in 3 lines, ending with ellipsis  
</button>

Edit: I just realized you wanted to have the expanded version to have ellipsis, as well. I don't think it is possible to do that. See this other SO Q&A for more information on that.

Text in Button (CSS)

1 Answers1