如何让toggle按钮在各类尺寸屏幕下保持响应式且始终不换行

实现方案 #

你可以通过CSS强制容器不换行+子元素自适应收缩的方式实现需求，以下是具体操作步骤：

1. 给单选切换组件添加自定义类名，覆盖默认换行规则
   给你的ngx-radio-toggle标签加自定义类no-wrap-toggle，同时给外层的ngxCol容器加类toggle-col，修改后代码如下：

<div ngxRow>
  <div ngxCol class="toggle-col">
    <ngx-radio-toggle class="no-wrap-toggle">
     <ngx-radio-toggle-button>"1 Monat"</ngx-radio-toggle-button>
     <ngx-radio-toggle-button>"3 Monate"</ngx-radio-toggle-button>
    </ngx-radio-toggle>
  </div>
</div>

2. 新增对应的CSS样式

/* 外层列禁止收缩，避免被其他元素挤压 */
.toggle-col {
  flex-shrink: 0;
  /* 若不需要自适应宽度，也可以设置固定宽度，比如 width: 200px */
}

/* 切换按钮容器强制不换行 */
.no-wrap-toggle {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100%;
  /* 如果希望文字长度超出时可以横向滚动，取消下面一行的注释即可 */
  /* overflow-x: auto; */
}

/* 切换按钮自适应宽度，文字溢出时自动省略 */
.no-wrap-toggle ngx-radio-toggle-button {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

如果项目里用的是ngx-layout栅格体系，也可以直接给ngxCol加fxFlex="none"属性，不用额外写toggle-col的样式，效果一致。

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