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类的样式，并给出list元素的边框和背景。 （这样我可以使用input[type='radio']:checked + .label-text选择器在选择按钮时以不同方式设置样式。）

Answer 1

CSS无法定义某个元素是否溢出。但是一些技巧的组合可以让你有所帮助。 + Truncate String with Ellipsis。

试着调整大小。 Filling the Space in the Last Row with Flexbox

＆＃13;

＆＃13;

/* **************
   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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;