表格單元格內聯CSS元素溢出

Question

我創建了一個腳本，它動態插入表格中包含內容的表格行。問題是，我在單元格內使用<span>和<a>標籤來顯示多章節條目。如果視口太小，而不是突破新行，則元素只會溢出單元格，因此被作者名稱覆蓋。

網站鏈接：http://hunpony.hu/hunfic/

動態的HTML被插入（例如）：

<span class="chapter-list"> 
    <a href="https://sites.google.com/site/ponydocs/home/nite/eljonek-az-unnepek/prologus" target="_blank" data-hasqtip="true" oldtitle="Prológus" title="">Pr</a> 
    <a href="https://sites.google.com/site/ponydocs/home/nite/eljonek-az-unnepek/i" target="_blank" data-hasqtip="true" oldtitle="1. fejezet" title="">1</a> 
    <a href="https://sites.google.com/site/ponydocs/home/nite/eljonek-az-unnepek/ii" target="_blank" data-hasqtip="true" oldtitle="2. fejezet" title="">2</a> 
    <a href="https://sites.google.com/site/ponydocs/home/nite/eljonek-az-unnepek/iii" target="_blank" data-hasqtip="true" oldtitle="3. fejezet" title="">3</a> 
    <a href="https://sites.google.com/site/ponydocs/home/nite/eljonek-az-unnepek/iv" target="_blank" data-hasqtip="true" oldtitle="4. fejezet" title="">4</a> 
    <a href="https://sites.google.com/site/ponydocs/home/nite/eljonek-az-unnepek/v" target="_blank" data-hasqtip="true" oldtitle="5. fejezet" title="">5</a> 
    <a href="https://sites.google.com/site/ponydocs/home/nite/eljonek-az-unnepek/vi" target="_blank" data-hasqtip="true" oldtitle="6. fejezet" title="">6</a> 
    <a href="https://sites.google.com/site/ponydocs/home/nite/eljonek-az-unnepek/vii" target="_blank" data-hasqtip="true" oldtitle="7. fejezet" title="">7</a> 
    <a href="https://sites.google.com/site/ponydocs/home/nite/eljonek-az-unnepek/viii" target="_blank" data-hasqtip="true" oldtitle="8. fejezet" title="">8</a> 
    <a href="https://sites.google.com/site/ponydocs/home/nite/eljonek-az-unnepek/epilogus" target="_blank" data-hasqtip="true" oldtitle="Epilógus" title="">Ep</a> 
    <a href="https://sites.google.com/site/ponydocs/home/nite/eljonek-az-unnepek/elmulnak-az-unnepek" target="_blank" data-hasqtip="true" oldtitle="Utószó" title="">Usz</a> 
</span> 

一些CSS規則：

td.title .chapter-list { 
    list-style:none; 
    padding:0; 
    margin:0; 
    font-variant: small-caps; 
    white-space: nowrap; 
    padding-right:0; 
} 
td.title .chapter-list:before { content: "(fejezetek: " } 
td.title .chapter-list:after { content: ")" } 
td.title .chapter-list a { 
    white-space: nowrap; 
    margin:0px 3px; 
    padding-bottom:0; 
} 
td.title .chapter-list a:after { content:", " } 
td.title .chapter-list a:last-child:after { content: "" !important } 

Answer 1

我檢查了這一點螢火蟲。爲td.title .chapter-list刪除white-space: nowrap;和td.title .chapter-list a 添加這個代替

td.title .chapter-list, 
td.title .chapter-list a 
{ 
white-space: normal; 
}