Question

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

所以我被桌子困住了。容器的宽度未知（适合移动屏幕）以及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>

那么，如何防止表格表现如此？

Answer 1

只需给div.moduleItemBody max-width:1px; DEMO

如果你想让你的标题在多行中断，如果它太长，请从white-space: nowrap; DEMO

中删除a.moduleItemTitle

Answer 2

对于使用引导程序的用户，可以在单元格上添加类class="text-wrap"。这将根据保存的数据自动将所需的width赋予表格单元格。

Answer 3

<table style='table-layout:fixed'>

如何防止表格单元格扩展

3 个答案: