Как разбить слово, если текст внутри кнопки Angular Material длиннее ширины кнопки?

John спросил: 03 ноября 2018 в 08:23 в: css

Как убедиться, что текст внутри кнопки углового материала не переполняется, обернув текст внутри кнопки. Я пробовал следующее:

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

РЕДАКТИРОВАТЬ Текущий результат:

желаемый результат: p>

за мои плохие навыки редактирования изображений)


0 ответов