html - CSS - Flexbox - 文本适合时的内联列表

Question

我有一个结构如下的单选按钮列表:

而且我想在有足够空间的情况下使用flexbox水平显示它们，如下:

但是，就目前而言，我正在使用 min-width 媒体查询来执行中断，因此可能会发生一些文本溢出:

.radio-btn-label {
  width: 100%;
  height: 40px;
}

@media only screen and (min-width: 900px) {
  .radio-btn-group {
    display: flex;
}

是否可以对单个 flex 子项或容器施加一些约束，以防止 flex 布局导致文本溢出？

目前HTML结构如下:

<div>
  <label class="radio-btn-label">
    <input type="radio">
    <div class="label-text">Foo</div>
  </label>
</div>

.label-text 类是样式化的，并为列表元素提供边框和背景。 (这样我就可以使用 input[type='radio']:checked + .label-text 选择器在选择按钮时设置不同的样式)。

Answer 1

CSS 无法定义某些元素是否溢出。但是结合一些技巧可以让你得到一些有用的东西。 Truncate String with Ellipsis + Filling the Space in the Last Row with Flexbox .

尝试调整大小。 Codepen

/* **************
   Quick Reset
************** */
html {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}
body {
  background-color: #3da7b4;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  padding: 2rem;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
/* **********
   Style
********** */
.Fieldset {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border: 1px solid #017480;
}
.Fieldset__legend {
  opacity: 0.99;
}
.Fieldset__title {
  font-family: 'Open Sans', sans-serif;
  font-size: 2rem;
  font-size: calc(2vmin + 2vmax);
  color: #017480;
}
.Fieldset__content {
  opacity: 0.99;
}
.Fieldset__input-group {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.Fieldset__label {
  opacity: 0.99;
}
.FluidLabel {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 160px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #d8d8d8;
  border: 1px solid #979797;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.FluidLabel__input {
  margin: 10px;
  -webkit-flex-shrink: 1;
      -ms-flex-negative: 1;
          flex-shrink: 1;
}
.FluidLabel__input:checked + .FluidLabel__text {
  color: #017480;
}
.FluidLabel__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<fieldset class="Fieldset">
  <legend class="Fieldset__legend">
    <h1 class="Fieldset__title">CSS - Flexbox - inline list when the text fits</h1>
  </legend>
  <div class="Fieldset__content">
    <p class="Fieldset__input-group">
      <label class="Fieldset__label FluidLabel">
        <input type="radio" name="name" class="FluidLabel__input"/><span class="FluidLabel__text">Label</span>
      </label>
      <label class="Fieldset__label FluidLabel">
        <input type="radio" name="name" class="FluidLabel__input"/><span class="FluidLabel__text">LabelLong</span>
      </label>
      <label class="Fieldset__label FluidLabel">
        <input type="radio" name="name" class="FluidLabel__input"/><span class="FluidLabel__text">LabelLoooooooong</span>
      </label>
      <label class="Fieldset__label FluidLabel">
        <input type="radio" name="name" class="FluidLabel__input"/><span class="FluidLabel__text">LabelLoooooooong</span>
      </label>
      <label class="Fieldset__label FluidLabel">
        <input type="radio" name="name" class="FluidLabel__input"/><span class="FluidLabel__text">LabelLoooooooong</span>
      </label>
    </p>
  </div>
</fieldset>