如何防止表細胞從擴大

https://jsfiddle.net/pepgw4cz/1/如何防止表細胞從擴大

這是一個典型的文章列表的情況下，每一個項目都有圖片，標題introtext和創建時間。正如你可以在第二項中看到的那樣，標題更長，表格超出了指定的寬度。這可以很容易地通過flex解決，但我的客戶使用IE9的2011年筆記本電腦，她不會放過。

所以我卡在桌子上。該容器的寬度未知（適合移動屏幕）以及itemBody的寬度（實際上，將它們設置爲固定寬度不會改變任何內容），並且項目標題必須限制爲一行（white-space:nowrap），該行有助於解決問題。

這裏是代碼，我複製它從我的網站，這樣的結構看上去有些奇怪，但是看看小提琴，你會得到的想法

<ul> 
    <li class="card " k2id="84"> 
    <div class="moduleItemImageContainer"> 
     <a class="moduleItemImage"> 

     </a> 
    </div> 

    <div class="moduleItemBody"> 
     <div class="moduleItemBodyContainer"> 
     <span class="moduleItemDateCreated">2016-06-11</span> 
     <a class="moduleItemTitle">Norm</a> 
     <div class="moduleItemIntrotext"> 
      人民大會堂國慶宴會的細節 </div> 
     </div> 
    </div> 
    </li> 

    <li class="card " k2id="83"> 
    <div class="moduleItemImageContainer"> 
     <a class="moduleItemImage"> 

     </a> 
    </div> 

    <div class="moduleItemBody"> 
     <div class="moduleItemBodyContainer"> 
     <span class="moduleItemDateCreated">2016-06-11</span> 

     <a class="moduleItemTitle">Looooooooong Title Long titleLooooooooong Title Long titl</a> 
     <div class="moduleItemIntrotext"> 
      人民大會堂國慶宴會的細節 </div> 
     </div> 
    </div> 
    </li> 
</ul> 

<style> 
li { 
    width: 100%; 
    list-style: none; 
    display: table; 
    margin-bottom: 16px; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8) 
} 

li>* { 
    display: table-cell; 
    vertical-align: top 
} 

div.moduleItemImageContainer{width:1%} 

a.moduleItemImage { 
    display: block; 
    background-image: url('http://placehold.it/100x100'); 
    width: 100px; 
    height: 100px; 
} 

a.moduleItemTitle{white-space:nowrap;overflow:hidden;display:block} 

div.moduleItemBody { 
    padding: 16px; 
} 

div.moduleItemBodyContainer{ 
    height:68px;overflow:hidden 
} 

span { 
    float: right 
} 

ul { 
    width: 500px 
} 

</style>

那麼，如何防止表的行爲像這個？

來源

2016-06-13 shenkwen

刪除white-space: nowrap;在我看來，最好的你可以做的就是[this]（https://jsfiddle.net/pepgw4cz/8/）或在標題上使用省略號。你可以爲'a'添加一個'title'，並將其值設置爲與內容相同，這樣當用戶將鼠標懸停在鏈接上時，他們就可以看到文本。如果這對你有用，我會作爲回答發佈。 – Harry

只是給你div.moduleItemBody一個max-width:1px;DEMO

，如果你希望你的標題多行打破，如果它太長，然後從a.moduleItemTitleDEMO

來源

2016-06-13 05:43:00

謝謝，我知道，這就是爲什麼我說**如果**爲其他人可能想要同樣的事情，第一個演示實際上是爲OP –

對不起，我複製了錯誤的網址！再次檢查 –

沒問題。唯一的解決辦法是，如果OP以某種方式想要文本全部顯示：D – Harry

如何防止表細胞從擴大

回答

相關問題