Angular Material 15(MDC)如何修改matToolTip宽度?
解决Angular Material 15 MDC Tooltip内容单行显示问题
你之前的代码只修改宽度未生效,是因为MDC tooltip的mdc-tooltip__surface元素默认带有white-space: normal(自动换行)和固定的max-width限制,仅调整width无法阻止内容折行。
正确的处理方式是同时设置强制不换行,并取消或放宽最大宽度限制:
::ng-deep .mdc-tooltip__surface { white-space: nowrap !important; max-width: unset !important; /* 取消最大宽度限制,让内容完全展示在一行 */ /* 若需要限制最大宽度,也可设置一个足够大的固定值,比如 max-width: 1000px !important; */ }
修改后,tooltip的内容就会保持单行显示,不会自动折行。
内容的提问来源于stack exchange,提问作者Dinesh
相关产品推荐
相关产品推荐

