如何防止表细胞从扩大

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

如何防止表细胞从扩大

回答

相关问题