【问题标题】：Text in Button (CSS)按钮中的文本 (CSS)
【发布时间】：2016-09-23 23:01:30
【问题描述】：
我想自定义我的按钮，按钮上有很长的文字。
当我在按钮上悬停时，我希望将长文本 换行 2 或 3 行，以便在按钮上显示更多文本。除此之外，我希望文本的其余部分省略。
有点像这样：-
原文：
这是一个长文本（悬停时）我想将其包裹在按钮内并以 3 行显示，以省略号结尾
按钮中的文字（固定宽度为 250px）：
这是一个长文本，（悬停时）...
悬停时按钮中的文字（按钮高度增加）：
这是一个长文本（悬停时）
我想包裹在按钮内
分 3 行显示，以 e 结尾...
我使用 angular-material 的 md-button 在 angularjs 中创建了一个 Plunkr。
由于我不擅长 CSS，所以我无法自定义按钮。
【问题讨论】：
标签：
css
angularjs
angular-material
【解决方案1】：
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>
编辑：我刚刚意识到你想让扩展版本也有省略号。我认为不可能做到这一点。有关更多信息，请参阅this other SO Q&A。