作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个 fab 列表,其中包含带有标签的 fab 按钮。
我找到了 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;
}
但是如果我没有指定宽度,标签会将文本换行。如果我这样做,标签不会根据标签的内容调整宽度。
如何让标签内容不换行?
最佳答案
问题源自
ion-label {
white-space: normal !important;
}
来 self 的 app.scss
关于css - Ionic 3 如何向晶圆厂添加非包装标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58526728/
Akka 和我开始互相认识了。 来自:Akka 2.3.6 (current) Actor Recommended Practice 这是一个名为 DemoActor 的示例 Actor : clas
我是一名优秀的程序员,十分优秀!