如何防止表格单元扩展

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

This is a typical article list scenario, every item has its image, title, introtext and created time. As you can see in the 2nd item, where the title is longer, the table exceeds its designated width. This could be easily solved by flex, but my client is using a 2011 laptop with IE9 and she wouldn't let go.

这是一个典型的文章列表场景,每个项目都有其图像,标题,内容文本和创建时间。正如您在标题较长的第2项中所看到的,表格超出了指定的宽度。这可以通过flex轻松解决,但我的客户使用2011年的笔记本电脑与IE9,她不会放手。

So I am stuck with table. The container's width is unknown(fit mobile screen) as well as the itemBody's width(actually, setting them to a fixed width doesn't change anything.), and the item Title has to be limited to one line(white-space:nowrap), which contributes to the problem.

所以我被桌子困住了。容器的宽度未知(适合移动屏幕)以及itemBody的宽度(实际上,将它们设置为固定宽度不会改变任何东西。),项目标题必须限制为一行(白色空间:nowrap) ),这有助于解决问题。

Here is the codes, I copy it from my site so the structure looks a little wierd, but look at the fiddle and you will get the idea

这是代码,我从我的网站复制它,所以结构看起来有点奇怪,但看看小提琴,你会得到这个想法

<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, how to prevent table from behaving like this?

那么,如何防止表格像这样?

1 个解决方案

#1

just give your div.moduleItemBody a max-width:1px; DEMO

只需给你的div.moduleItemBody一个最大宽度:1px; DEMO

and if you want your title to break in multiple lines if it is too long then remove white-space: nowrap; from a.moduleItemTitle DEMO

如果你想要你的标题在多行中断,如果它太长则删除white-space:nowrap;来自a.moduleItemTitle DEMO

#1