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;&字斷再添加一個類：盈虧所有; &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>