當一個CSS UL立項目延伸經過UL，如何匹配的UL

Question

的jsfiddle問題的動態寬度：https://jsfiddle.net/td6szj3o/

/ 我有每每個L1標準文本項的UL裏。該列表是動態的，所以有時每個內容li都小於其所在容器的集合width:100%，但有時li項目具有擴展超過容器寬度的文本：100％。而不是強迫文本到下一行，我想保持長文本延伸超過ul。目前可以很好地工作，很少有額外的CSS樣式到UL。使用這種方法

，我看到了一個底部滾動的UL下彈出，讓我可以滾動查看Li含量的休息權。這對我來說很好，我想保留這一點。

但是，我介紹了一個問題，試圖保持備用li背景顏色，這是非常流行的，並通常標準的大多數數據輸出在無序列表中。由於位於ul中的li的css是width:100%，並且ul本身在width:100%處停止，所以li僅延伸到ul寬度。但是問題在於文本延伸經過li，它在ul本身的width:100%之外，因此li的背景顏色在ul寬度結束的任何地方停止。

我試圖來一個解決方案，將在所有的瀏覽器，這將允許UL有李項擴展到任何立的最長內容的整個寬度。最近我得到的是使用display:table-header-group，但不幸的是，它不擴大到width:100%當我有裏面的小文字內容。

我可以簡單地添加一個min-width:300px什麼的ul，這將解決我的問題。但不幸的是，當用戶使用較小的設備或顯示器尺寸時，這並不會削減它。當我使用min-width:100%也沒有解決問題。我已經使用了display:XXX的所有組合，並且當我在ul或li中的任何內容中，可以打破較小文本ul輸出或較長文本ul輸出的視圖，或者同時打破這兩種視圖的組合。

任何幫助或指導，將不勝感激。我正在尋找適用於所有最新版本的Chrome，FF，Safari等的解決方案;並堅持一個CSS解決方案。

請注意，我特意留下了關於css的單詞包裝。我不希望文字轉到下一行，而是繼續在ul上水平顯示。

下面

是HTML/CSS我使用：

<ul> 
<li>dynamic li item would be here; nothing crazy</li> 
</ul> 

.sidebar ul { 
    position:relative; 
    max-height:55vh; 
    min-height:10em; 
    margin:0; 
    width:100%; 
} 
.node-list{ 
    white-space:nowrap; 
    padding-bottom: 2em; 
} 
.node-list li{ 
    padding: .15em .5em .15em .35em; 
    margin:0; 
    border-left: solid 2px transparent; 
    max-width:100%; 
    width:auto; 
} 
.node-list li a{ 
    color: rgb(73,73,73); 
    font-weight: bold; 
    text-decoration: none; 
} 
.node-list li:nth-of-type(2n){ 
    background-color: rgb(242,242,242) 
} 
.node-list li:nth-of-type(2n-1){ 
    background-color: rgb(255,255,255) 
} 

Answer 1

將sidebar ul設置爲display: inline-block並將其從width: 100%更改爲min-width: 100%

Updated fiddle

棧片斷

.sidebar ul { 
 
    position: relative; 
 
    max-height: 55vh; 
 
    min-height: 10em; 
 
    margin: 0; 
 
    min-width: 100%;     /* changed property */ 
 
    display: inline-block;   /* added property */ 
 
} 
 

 
.node-list { 
 
    white-space: nowrap; 
 
    padding-bottom: 2em; 
 
} 
 

 
.node-list li { 
 
    padding: .15em .5em .15em .35em; 
 
    margin: 0; 
 
    border-left: solid 2px transparent; 
 
    max-width: 100%; 
 
    width: auto; 
 
} 
 

 
.node-list li a { 
 
    color: rgb(73, 73, 73); 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
} 
 

 
.node-list li:nth-of-type(2n) { 
 
    background-color: rgb(242, 242, 242) 
 
} 
 

 
.node-list li:nth-of-type(2n-1) { 
 
    background-color: rgb(255, 255, 255) 
 
}

<div class="sidebar"> 
 
    <ul class="node-list"> 
 
    <li>Lorem</li> 
 
    <li>Two of the nation's top intelligence officials repeatedly refused to say Wednesday whether President Donald Trump asked them to intervene in or downplay the FBI's ongoing Russia investigation, though they said they have never felt pressure to act</li> 
 
    <li>Lorem</li> 
 
    <li>Two of the nation's top intelligence officials repeatedly refused to say Wednesday whether President Donald Trump asked them to intervene in or downplay the FBI's ongoing Russia investigation, though they said they have never felt pressure to act</li> 
 
    <li>Lorem</li> 
 
    <li>Two of the nation's top intelligence officials repeatedly refused to say Wednesday whether President </li> 
 
    </ul> 
 
</div>

Answer 2

在你的CSS文件中刪除no-wrap並添加break-all到李：

.node-list{ 
    padding-bottom: 2em; 
} 
.node-list li{ 
    padding: .15em .5em .15em .35em; 
    margin:0; 
    border-left: solid 2px transparent; 
    word-break: break-all; 
} 

JS小提琴，我認爲是解決方案https://jsfiddle.net/td6szj3o/14/