截断表格单元格中的溢出文本，因此表格不会比屏幕宽

Question

我正在尝试以表格格式显示各种项目（每个条目都有各种属性）。还需要以下内容：

1. 列应该是动态的，以便紧密贴合内容，没有固定宽度（由表格布局处理）
2. 行应该可以点击以激活对该行条目的操作，例如显示具有该内容的扩展版本的新页面（使用 CSS display: table/table-row/table-cell 而不是 <table>/<tr>/<td> 处理 - 根据示例代码）。 （我的另一个原因是我使用 JSF，它生成 HTML，但有点让我坚持使用它。）
3. 我无法做到这一点：如果可能，表格不应超出屏幕宽度。特别是，“摘要”列显示（可能很长）文本，必要时将被截断，因此文本适合单元格，该单元格适应表格宽度，表格宽度可能不大于屏幕宽度。
   • 我在此摘要中使用 CSS text-overflow: ellipsis 以及其他需要的设置。因为周围的<div>已经有了display: table-cell，而ellipsis属性needs an inline/block element，“摘要”文本被包裹在另一个<div>中。

这是 desired 效果的示例（注意底部没有滚动条）：

虽然这是我目前能够实现的（不理想）（请注意底部的滚动条 - 表示表格在右侧的窗口外运行）：

这是实现这一点的准系统代码（可以省略所有标有/*l&f*/（外观）的属性，它们只是为了生成一个看起来更干净、更容易调试的示例）。

CSS 和 HTML：

A {
  /*l&f*/text-decoration: inherit;
  /*l&f*/color: inherit;
}
.list-table {
  display: table;
  /*l&f*/border: 1px solid blue;
  /*l&f*/border-spacing: 5px;
}
.list-tr {
  display: table-row;
  /*l&f*/background-color: lightgray;
}
.list-td {
  display: table-cell;
  white-space: nowrap; /* one line */
  /*l&f*/padding: 2px; border : 1px solid green;
  /*l&f*/border: 1px solid red;
}
.summary {
  display: block;
  white-space: nowrap; /* one line */
  overflow: hidden; /* make text overflow */
  text-overflow: ellipsis; /* truncate tex with ... */
  /*l&f*/background-color: lightblue;
}

<div class="list-table">
  <a href="#1" class="list-tr">
    <div class="list-td">Row 1</div>
    <div class="list-td">More stuff</div>
    <div class="list-td">
      <div class="summary">Some single line run on text goes here</div>
    </div>
  </a>

  <a href="#2" class="list-tr">
    <div class="list-td">Row 2</div>
    <div class="list-td">Other column</div>
    <div class="list-td">
      <div class="summary">This is text content that runs on and on
        and on without end and may need to be truncated somewhere on the
        summary screen depending on screen size to show only the first part
        that will fit.</div>
    </div>
  </a>

  <a href="#3" class="list-tr">
    <div class="list-td">Row 3</div>
    <div class="list-td">Still other content</div>
    <div class="list-td">
      <div class="summary">Here is still more long text that may
        need truncation in the summary version because it is so long.</div>
    </div>
  </a>
</div>

我已经能够使用display: -moz-box（以及各种其他-moz- 设置）以summary 样式实现所需的结果。不高兴，因为这不是跨平台的。

你有更好的建议吗？非常感谢您的帮助:-)

Answer 1

如果您可以对导出的 HTML 进行更改，那么您有一个可能的解决方案。

我对您的 HTML 进行了一些更改（将父 div 添加到 .summary，以使用 table-layout:fixed 创建固定表）

请参阅下面的片段：

A {
  /*l&f*/
  text-decoration: inherit;
  /*l&f*/
  color: inherit;
}
.list-table {
  display: table;
  /*l&f*/
  border: 1px solid blue;
  /*l&f*/
  border-spacing: 5px;
  width: 100%; /* ADDED */
}
/* CREATED */
.fixed-table {
  width:100%;
  table-layout: fixed;
  display:table
}

.list-tr {
  display: table-row;
  /*l&f*/
  background-color: lightgray;
}
.list-td {
  display: table-cell; /* CHANGED */
  white-space: nowrap;
  /* one line */
  /*l&f*/
  padding: 2px;
  border: 1px solid green;
  /*l&f*/
  border: 1px solid red;
}
.summary {
  display: table-cell;
  /*l&f*/
  background-color: lightblue;
  white-space: nowrap;
  /* one line */
  overflow: hidden;
  /* make text overflow */
  text-overflow: ellipsis;
  /* truncate texT with ... */
}

<div class="list-table">
  <a href="#1" class="list-tr">
    <div class="list-td">Row 1</div>
    <div class="list-td">More stuff</div>
    <div class="list-td">
      <div class="fixed-table">
        <div class="summary">Some single line run on text goes here</div>
      </div>
    </div>
  </a>

  <a href="#2" class="list-tr">
    <div class="list-td">Row 2</div>
    <div class="list-td">Other column</div>
    <div class="list-td">
      <div class="fixed-table">
        <div class="summary">This is text content that runs on and on and on without end and may need to be truncated somewhere on the summary screen depending on screen size to show only the first part that will fit.</div>
      </div>
    </div>
  </a>

  <a href="#3" class="list-tr">
    <div class="list-td">Row 3</div>
    <div class="list-td">Still other content</div>
    <div class="list-td">
      <div class="fixed-table">
        <div class="summary">Here is still more long text that may need truncation in the summary version because it is so long.</div>
      </div>
    </div>
  </a>
</div>

Answer 2

我所能做的就是将（任意）max-width 添加到您的 summary 类中：

.summary {
  display: block;
  white-space: nowrap; /* one line */
  overflow: hidden; /* make text overflow */
  text-overflow: ellipsis; /* truncate tex with ... */
  /*l&f*/background-color: lightblue;
  max-width: 500px;
}

你需要给 .summary 某种非继承宽度才能让 text-overflow 工作我认为...

Answer 3

.list-table {
  max-width:100vw;
}