CSS：如何使可滚动的标签列表在高度上保持一致

Question

我试图获取一个可滚动的标签列表，这些标签显示在两列中。

1. 列的大小需要根据包含的div进行弯曲。
2. 列表应该从左到右，然后从上到下流动。根据其他SO帖子，使它display: inline应该有用，但似乎并非如此。
3. 这些词也需要包装，由于某种原因，在我的尝试下，不起作用。在破折号之后，它将标签的其余部分推到下一行，而不是继续然后包装。
4. 棘手的部分是，每个标签的高度需要是均匀的，它们应该等于最高标签的高度。正如您在演示中看到的，一个标签标题可能很长，因此该标签的高度应确定所有其他标签的高度。我不知道如何在CSS中开始这样做。

我对此有一个适度的尝试：http://jsfiddle.net/pdExf/860/，但它缺少我上面要求的要求。

HTML ：

<div>
  <ul>
    <li>
      <label>
        <input type="checkbox"/>
        <span> 1-thisisaverrrrrrrrrrrrryyyyyy_long_word_with_no_spaces </span>
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox"/>
        <span> 2-thisisaverrrrrrrrrrrrryyyyyy_long_word_with_no_spaces </span>
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox"/>
        <span> 3-thisisaverrrrrrrrrrrrryyyyyy_long_word_with_no_spaces </span>
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox"/>
        <span> 4-very_short_word </span>
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox"/>
        <span> 5-medium_length_word </span>
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox"/>
        <span> 6-still_no_spaces </span>
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox"/>
        <span> 7-thisisaverrrrrrrrrrrrryyyyyy_long_word_with_no_spaces </span>
      </label>
    </li>
  </ul>
</div>

CSS：

span {
  margin-left: 14px;
  flex: 1 1 auto;
  overflow: 'hidden',
  word-wrap: break-word;
}

label {
  box-sizing: border-box;
  background: white;
  color: black;
  padding: 10px;
  margin: 10px 10px 20px 10px;
  display: flex;
  border: 1px solid black;
}

ul {
  display: flex,
  flex: 1 1 auto;
  flex-wrap: wrap;
  margin: 10px 0px 0px 10px;
  column-count: 2;
  column-gap: 20px;
}

div {
  height: 130px;
  background-color: lightblue;
  overflow: scroll;
}

li {
  display: inline; // want labels to display left-to-right
}

还应该添加什么才能使其发挥作用？

Answer 1

使用word-wrap: break-word; ＆amp; word-break：break-all;再添加一个; ＆amp; white-space: normal;

<强> Revised Fiddle

label span { 
 white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
white-space: -webkit-pre-wrap; /*Chrome & Safari */ 
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
white-space: pre-wrap;       /* css-3 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
word-break: break-all;
white-space: normal;
}

span {
  margin-left: 14px;
  flex: 1 1 auto;
  overflow: 'hidden', word-wrap: break-word;
}

label span {
  white-space: -moz-pre-wrap !important;
  /* Mozilla, since 1999 */
  white-space: -webkit-pre-wrap;
  /*Chrome & Safari */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  white-space: pre-wrap;
  /* css-3 */
  word-wrap: break-word;
  /* Internet Explorer 5.5+ */
  word-break: break-all;
  white-space: normal;
}

label {
  box-sizing: border-box;
  background: white;
  color: black;
  padding: 10px;
  margin: 10px 10px 20px 10px;
  display: flex;
  border: 1px solid black;
}

ul {
  display: flex, flex: 1 1 auto;
  flex-wrap: wrap;
  margin: 10px 0px 0px 10px;
  column-count: 2;
  column-gap: 20px;
}

div {
  height: 130px;
  background-color: lightblue;
  overflow: scroll;
}

li {
  display: inline; // want labels to display left-to-right
}

<div>
  <ul>
    <li>
      <label>
        <input type="checkbox"/>
        <span> 1-thisisaverrrrrrrrrrrrryyyyyy_long_word_with_no_spaces </span>
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox"/>
        <span> 2-thisisaverrrrrrrrrrrrryyyyyy_long_word_with_no_spaces </span>
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox"/>
        <span> 3-thisisaverrrrrrrrrrrrryyyyyy_long_word_with_no_spaces </span>
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox"/>
        <span> 4-very_short_word </span>
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox"/>
        <span> 5-medium_length_word </span>
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox"/>
        <span> 6-still_no_spaces </span>
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox"/>
        <span> 7-thisisaverrrrrrrrrrrrryyyyyy_long_word_with_no_spaces </span>
      </label>
    </li>
  </ul>
</div>