我有一个带有应有标签的晶圆厂按钮的晶圆厂列表。
我找到了Fabs With Labels In Ionic 3和whats the correct way of inserting label in an Ionic FAB list。
我的HTML代码是:
<ion-fab left top>
<button ion-fab color="light">
<ion-icon name="menu"></ion-icon>
</button>
<ion-fab-list side="bottom">
<button ion-fab>
<ion-icon name="person"></ion-icon>
<ion-label>Test Test Test</ion-label>
</button>
<button ion-fab>
<ion-icon name="alarm"></ion-icon>
<ion-label>Bla Bla</ion-label>
</button>
</ion-fab-list>
</ion-fab>
CSS
button[ion-fab] {
overflow: visible;
position: relative;
ion-label {
display: inline-block;
position: absolute;
top: -8px;
left: 60px;
color: white;
background-color: rgba(0,0,0,0.7);
line-height: 24px;
padding: 4px 8px;
border-radius: 4px;
pointer-events: auto;
}
contain: layout;
}
但是如果我不指定宽度,标签会将文本中断到换行符。如果我这样做,则标签不要根据标签内容调整其宽度。
如何使标签内容不换行?