Angular中matListItemLine属性文本无法换行问题咨询

这不属于Bug，是Angular Material组件的默认样式设计及指令语义导致的，下面具体说明：

1. 官方文档描述的正确理解 #

官方文档中提到的「matListItemLine Wraps a line of text within a list item」，意思是该指令用于作为列表项内的一行文本容器——即一个列表项可以包含多个matListItemLine元素，每个对应独立的一行内容，而非指让单个matListItemLine内的文本自动换行。

2. 文本不换行的原因 #

Angular Material的mat-list-item默认采用Flex布局，matListItemLine的内置样式中可能存在white-space: nowrap规则，或是因Flex容器特性导致元素未被限制宽度，使得文本无法自动折行。你尝试修改CSS无效，大概率是因为自定义样式的优先级低于组件内置样式。

3. 可行的解决方案 #

你可以通过自定义CSS强制开启文本换行，注意提升样式优先级：

/* 在组件样式中使用::ng-deep穿透（Angular 12+需配合encapsulation配置或全局样式） */
::ng-deep span[matListItemLine] {
  white-space: normal;
  word-wrap: break-word;
  width: 100%;
}

或者直接在全局样式文件（如styles.css）中设置：

span[matListItemLine] {
  white-space: normal;
  word-wrap: break-word;
  width: 100%;
}

4. 关于<p>/<br>标签的问题 #

使用<p>或<br>能实现换行，是因为<p>是块级元素默认会换行，<br>是强制换行符，但这类方式会破坏组件的默认布局结构，导致无需换行的场景出现非预期换行，因此不推荐。

内容的提问来源于stack exchange，提问作者Luigi Woodhouse