如果 Angular Material 按钮内的文本比按钮的宽度长，如何打断单词？

Question

如何确保 Angular Material 按钮内的文本不会溢出，方法是将文本包裹在按钮内。我尝试了以下方法：

HTML

<div class="cotnainer">
 <button mat-raised-button color="accent">Click me! This is a long text, but I want to to wrap if content is overflowing
 </button>
</div>

CSS

.container{
  width: 200px;
  height:200px;
  background-color: silver;
}
button{
  max-width: 100%;
}

span, .mat-button-wrapper{ // I have tried all of the following options, but it does not work.
  max-width: 100% !important;
  word-break: break-all !important;
  overflow: hidden !important;
}

这是一个Stackblitz

编辑当前结果：

期望的结果：（抱歉我的图像编辑技术不佳）

Answer 1

您可以使用以下代码实现此目的：

隐藏：

button {
  overflow-x: hidden !important;
}

分词：

button{
  white-space: pre-wrap !important;
}

如果 Angular Material 按钮内的文本比按钮的宽度长，如何打断单词？

How to break word if text inside Angular Material button is longer than the width of the button?

css

angular-material2

HTML

CSS