Wie aus expandierenden

Question

https://jsfiddle.net/pepgw4cz/1/

Dies ist eine typische Artikelliste Szenario Tabellenzelle zu verhindern, jedes Element sein Image hat, Titel, introtext und erstellt Zeit. Wie Sie im zweiten Punkt sehen können, wenn der Titel länger ist, überschreitet die Tabelle die angegebene Breite. Dies könnte leicht durch flex gelöst werden, aber meine Klientin verwendet einen Laptop 2011 mit IE9 und sie würde nicht loslassen.

Also ich bin mit Tisch fest. Die Breite des Containers ist unbekannt (passend für den mobilen Bildschirm) sowie die Breite von itemBody (tatsächlich ändert die Einstellung auf eine feste Breite nichts.) Und der Item-Titel muss auf eine Zeile begrenzt sein (white-space:nowrap), was dazu beiträgt zu dem Problem. Hier

ist die Codes, ich es von meiner Seite zu kopieren, so dass die Struktur ein wenig seltsam aussieht, aber auf der Geige schauen und Sie erhalten die Idee

<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> 

So, wie zu verhindern Tisch bekommen von benimmt sich wie Dies?

Answer 1

nur geben Sie Ihrem div.moduleItemBody ein max-width:1px;DEMO

und wenn Sie möchten, dass Ihre Titel in mehreren Linien zu brechen, wenn es zu lang ist, dann a.moduleItemTitleDEMO