代码之家 › 专栏 › 技术社区 › John

如果角材质按钮中的文本长于按钮的宽度,如何断字?

angular-material2 css

John · 技术社区 · 6 年前

如何通过将文本包装在按钮内,确保角度材质按钮内的文本不会溢出。我试过以下方法:

HTML/H3>

<div class=“cotnainer”>
<button mat raised button color=“accent”>单击我!这是一个长文本,但如果内容溢出,我想换行
&按钮/按钮;
&L/DIV & GT;
< /代码> 

 CSS

.container{
宽度:200 px;
高度:200 px;
背景色:银色;
}
按钮{
最大宽度:100%;
}

span,.mat button wrapper//我已经尝试了以下所有选项,但它不起作用。
最大宽度:100%!重要的;
断字:全部断字!重要的;
溢出:隐藏!重要的;
}
< /代码> 

这里是astackblitz

编辑
当前结果:




期望结果:(抱歉我的图像编辑能力差)
.

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

编辑
当前结果:



期望结果:(抱歉我的图像编辑能力差)

1 回复 | 直到 6 年前

Brunhack 6 年前

您可以通过以下代码实现这一点:

躲藏:

button {
  overflow-x: hidden !important;
}

断言:

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

推荐文章

Rubyen · 同一行上的角度材质多个“输入”

7 年前

John Earl · Travis CI使用有角材质失败

7 年前

user1893354 · Angular2材质选择下拉列表打开后不会关闭

7 年前

Sergio Lopez · 带材质自动完成的角度5

7 年前

cdv · 如何使用模式验证mat日期选择器输入?

7 年前

Pablo De Luca · 角度材质2-手动将字段/控件设置为无效

7 年前

userx · 无法识别角材料模块

7 年前

A T · 带角度材质的垂直选项卡

7 年前

user9557542 · 角度材质图标不工作

7 年前

Vik · 在html文件中引用常量的角度材质

7 年前