我有一个通知计数，它显示特定用户的通知数量，但当用户有99个以上的通知时，matBadge不会显示完整的数量，它会显示‘1...’，如下图所示.有谁能告诉我怎么修吗？我想要显示完整的数字.
我试图改变徽章的位置或增加徽章的面积，但没有奏效
推荐答案
将width和height设定在固定水平并不是最好的 Select .
在styles.scss中添加以下css:
.mat-badge-content {
width: auto !important; // Set the width to auto
height: auto !important; // Set the height to auto
min-width: 22px; // But the width should be at least 22px (in case the number is 99 or less)
min-height: 22px; // But the height should be at least 22px (in case the number is 99 or less)
aspect-ratio: 1/1; // Keep the circle shape
display: flex; // Required in order for align-items and justify-content to work
align-items: center; // Center the number vertically
justify-content: center; // Center the number horizontally
padding: 2px; // Add a bit of padding so that the number is not placed all the way to the border of the circle
}
屏幕截图:
请看live demo.
Html相关问答推荐
我的表的第一列似乎是推其他2列到右边，我不能改变它
在Apps Script中连接CSS与HTML
如何让QML`Text`元素内的链接在悬停时显示鼠标指针？
浏览器是在调整大小还是在全屏上交换视频源？
创建一个带有div和径向渐变的全宽半圆
如何突破安莉得分
为什么index.html在Django中有这样的名称？
如何将多个类名组合到CSS中的一个关键帧
如何防止弹性项目溢出容器？
如何正确地嵌套Flexbox
CSS 字母间距将按钮向右扩展
如何让一个 div 元素粘在另一个元素上？
如何在滚动行中显示一张图片和下一张图片的一半？
如何将某些 div 的高度限制为具有 display flex 行的同一父 div 中的其他 div？
如何使用 CSS 制作蜂窝状网格？
Css 左属性问题
自定义进度条 Html 和 CSS 布局
禁用的 Select 标签没有在 chrome 上的 css 中指定的 colored颜色
有没有办法在 CSS 类子句中指定多个 HTML 元素？
如何将内容从侧边栏的底部移动到右侧？
实用课程推荐