如何实现NG Zorro多选选择器选中项单行显示，避免高度翻倍

问题根因 #

此前自行添加单行样式未生效的核心原因：NG Zorro的多选nz-select组件受Angular视图样式封装机制影响，已选标签的实际渲染容器默认配置了flex-wrap: wrap换行规则，同时组件内置了根据标签换行数量自动调整容器高度的逻辑。仅给顶层组件类添加white-space: nowrap这类单行属性，既没有穿透到实际的标签渲染节点，也无法覆盖flex布局的换行规则，因此无法达到预期效果。

具体实现步骤 #

• 为目标nz-select组件添加专属自定义类（例如nz-select-single-line），通过类选择器做精准定位，避免样式污染页面其他同类组件
• 结合项目的样式隔离规则，通过样式穿透或全局样式文件编写以下规则，强制实现单行展示：

  .nz-select-single-line .nz-select-selector {
    /* 固定选择器为单行高度，按使用的组件尺寸（sm/default/lg）对应调整数值 */
    height: 32px !important;
    line-height: 30px;
    overflow: hidden;
  
    /* 定位已选标签的外层flex容器 */
    .nz-select-selection-wrap {
      display: flex;
      /* 强制禁止flex子元素换行，覆盖组件默认的wrap配置 */
      flex-wrap: nowrap !important;
      /* 溢出标签支持横向滚动，不撑高组件容器 */
      overflow-x: auto;
      scrollbar-width: thin;
  
      /* 单个已选标签不被压缩变形 */
      .nz-select-selection-item {
        flex-shrink: 0;
        margin-right: 4px;
      }
    }
  }
  

踩坑注意事项 #

仅对最外层组件类添加white-space: nowrap无法解决换行问题，该属性对flex布局的换行逻辑无实际控制作用，必须直接修改flex容器的flex-wrap属性才能生效。
必须给已选标签添加flex-shrink: 0规则，否则标签会被flex容器自动压缩，出现文字截断、尺寸错乱的问题。
不要直接对全局默认的.nz-select类做样式覆盖，否则会影响其他正常使用换行逻辑的选择器组件的展示效果。

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