You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.16 23:24:49