表格单元格中的CSS文本溢出？

Posted 2023-03-06

技术标签:

【中文标题】表格单元格中的CSS文本溢出？【英文标题】：CSS text-overflow in a table cell? 【发布时间】：2012-04-05 02:13:15 【问题描述】：

我想在表格单元格中使用 CSS text-overflow，这样如果文本太长而无法容纳在一行上，它将用省略号剪辑而不是换行到多行。这可能吗？

我试过了：

td 
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

但white-space: nowrap 似乎使文本（及其单元格）不断向右扩展，将表格的总宽度推到其容器宽度之外。但是，如果没有它，文本在到达单元格边缘时会继续换行为多行。

【问题讨论】：

表格单元格不能很好地处理overflow。尝试在单元格中放置一个 div 并设置该 div 的样式。 【参考方案1】：

XML

<td><div>Your overflowing content here.</div></td>

CSS

td div

 max-height: 30vh;
 overflow: auto;

为了这个非常具体的目的而试图弄乱整个table 是没有意义的。是的，如果您明确地努力避免成为另一个嵌套 600 个 div 的 Twitter/Facebook“开发者”，有时添加一个额外的元素是可以的。

【讨论】：

【参考方案2】：

对于带有省略号的干净的自动大小表

如果您可以抛弃表格标签，那么现代 CSS 有一个更清洁 (IMO) 的解决方案可用：使用 grid 布局。

您只需要一个div 或类似名称来表示表格，其中包含单元格，例如：

<div class="table">
  <div class="cell">
  <div class="cell">
  <div class="cell">
  <div class="cell">
</div>

现在，如果我希望这是一个 2x2 表，那么只需为网格定义两个自动调整大小的列：

table 
  display: grid;
  grid-template-columns: auto auto;

对于单元格，您只需要多几行 CSS：

.cell 
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

任务完成！如果您需要确保某些列比其他列宽，那么使用列模板的 fr 单位或其他可用选项效果很好。

【讨论】：

jsfiddle.net/r92c4b0p 这是唯一一个不会弄乱表格列的自动宽度的解决方案。这个方案要求你提前知道表中的列数（即grid-template-auto属性需要为表中的每一列定义一个auto关键字）。如果你的表是动态的，并且你事先不知道列数，你需要做一些 CSS 体操来让它工作。一种可能的解决方法是定义：.table-col-2 grid-template-columns: auto auto; .table-col-5 grid-template-columns: auto auto auto auto auto; 等，并在运行时在 html 中动态应用正确的类。但这是一个混乱的解决方案。 @cartbeforehorse 如果我不知道运行时的列数，我可能会使用 CSS 变量作为 grid-template-columns 的值，然后通过 JS 设置它 - 不需要任何额外的类等，它可以默认为预期的计数。 @MattLacey 毫无疑问，有一些巧妙的 javascript 解决方案可以让网格系统动态工作。对于某些情况，您的解决方案将非常优雅。尽管如此，我还是忍不住觉得，在任何旨在以表格形式呈现数据的动态场景中，CSS 网格只是过度设计了问题。为什么要使用旨在解决完全不同的问题的解决方案，然后必须使用不必要的 JavaScript 来掩盖裂缝，而纯 HTML 已经提供了一种呈现 2D/表格数据的简单方法。【参考方案3】：

指定max-width 或固定宽度并不适用于所有情况，并且表格应该是流动的并自动调整其单元格。这就是桌子的用途。适用于 IE9 和其他浏览器。

使用这个：http://jsfiddle.net/maruxa1j/

table 
    width: 100%;

.first 
    width: 50%;

.ellipsis 
    position: relative;

.ellipsis:before 
    content: '&nbsp;';
    visibility: hidden;

.ellipsis span 
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

<table border="1">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="ellipsis first"><span>This Text Overflows and is too large for its cell.</span></td>
            <td class="ellipsis"><span>This Text Overflows and is too large for its cell.</span></td>
            <td class="ellipsis"><span>This Text Overflows and is too large for its cell.</span></td>
            <td class="ellipsis"><span>This Text Overflows and is too large for its cell.</span></td>
        </tr>
    </tbody>
</table>

【讨论】：

注意：此解决方案将单元格内容包装在 <span> 元素中。这是一个非常聪明的解决方案，适用于我需要解决方案的所有表格。但是，如果您不希望所有表格单元格的宽度相同，它确实需要您设置宽度。当display: block等其他解决方案没有时，这会保持垂直对齐 @gogaz :before 设置单元格的高度，以便在没有其他单元格时它不会折叠。此外，可能不会为空单元格呈现某些边框。 HTML 实体，如 CSS content 属性值中的 &nbsp; don't work。【参考方案4】：

对我有用

table 
    width: 100%;
    table-layout: fixed;


td 
   text-overflow: ellipsis;
   white-space: nowrap;

【讨论】：

【参考方案5】：

要在溢出表格单元格时使用省略号剪辑文本，您需要在每个 td 类上设置 max-width CSS 属性才能使溢出生效。不需要额外的布局 div 元素：

td

 max-width: 100px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;

对于响应式布局；使用max-width CSS 属性来指定列的有效最小宽度，或者只使用max-width: 0; 以获得无限的灵活性。此外，包含表将需要特定宽度，通常为width: 100%;，并且列的宽度通常设置为总宽度的百分比

table width: 100%;
td

 max-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;

td.column_a width: 30%;
td.column_b width: 70%;

历史：对于 IE 9（或更低版本），您需要在 HTML 中包含此内容，以修复特定于 IE 的呈现问题

<!--[if IE]>
<style>
table table-layout: fixed; width: 100px;
</style>
<![endif]-->

【讨论】：

表格还需要一个宽度才能在 IE 中工作。 jsfiddle.net/rBthS/69 如果您设置width: 100%; 和min-width: 1px;，单元格将始终尽可能宽，并且仅在需要时使用省略号来截断文本（而不是在元素宽度达到一定大小时） ) - 这对于响应式布局非常有用。 @OzrenTkalcecKrznaric 它确实适用于display: table-cell，但当max-width 以百分比（％）定义时则不行。在 FF 32 上测试（继续上述）如果您使用 % 值，则仅在带有 display: table 的元素上使用 table-layout: fixed 即可解决问题稍微扩展<td style="width: 100%">响应式案例：从所有单元格或列中删除width: 100%s，将table-layout: fixed; width: 100%添加到元素，然后only 指定宽度到<col> 或（第一行）<td> 元素，您希望不宽于 该宽度。没有为应该尽可能宽的列指定宽度。
【参考方案6】：

这在我的情况下，在 Firefox 和 Chrome 中都有效：

td 
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;

【讨论】：

当我这样做时，我的 th 和 td 位置不对...【参考方案7】：

我在单元格（相对）内使用绝对定位的 div 解决了这个问题。

td 
    position: relative;

td > div 
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;

就是这样。然后你可以添加一个 top: 值到 div 或垂直居中：

td > div       
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 1.5em; // = line height

要在右侧获得一些空间，您可以稍微减小 max-width。

【讨论】：

使用 JSFiddle 会很好，就像这个热门问题的许多其他答案一样。是的，这可行，但我对 div 使用了一些不同的样式：left:0;top:0;right:0;bottom:0;padding:2px;获得正确的位置，并具有与表格单元格中相同的填充。这确实会强制所有列的宽度相等，因此它与将表格设置为固定宽度的解决方案相同，只是涉及一个额外的元素（div）。【参考方案8】：

将单元格内容包装在弹性块中。作为奖励，单元格自动适合可见宽度。

table 
  width: 100%;


div.parent 
  display: flex;


div.child 
  flex: 1;
  width: 1px;
  overflow-x: hidden;
  text-overflow: ellipsis;

<table>
  <tr>
    <td>
      <div class="parent">
        <div class="child">
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        </div>
      <div>
    </td>
  </tr>
</table>

【讨论】：

我还必须将white-space: nowrap; 添加到child 类中。这与此处的所有其他解决方案完全相同，因为它强制列等宽，禁用列的自动调整大小。【参考方案9】：

如果您不想将固定宽度设置为任何内容

以下解决方案允许您拥有较长的表格单元格内容，但不得影响父表格的宽度，也不得影响父行的高度。例如，您希望有一个带有width:100% 的表格，该表格仍将自动调整大小功能应用于所有其他单元格。在带有“Notes”或“Comment”列或其他内容的数据网格中很有用。

将这 3 条规则添加到您的 CSS 中：

.text-overflow-dynamic-container 
    position: relative;
    max-width: 100%;
    padding: 0 !important;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    vertical-align: text-bottom !important;

.text-overflow-dynamic-ellipsis 
    position: absolute;
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
    width:100%;
    top: 0;
    left: 0;

.text-overflow-dynamic-container:after,
.text-overflow-dynamic-ellipsis:after 
    content: '-';
    display: inline;
    visibility: hidden;
    width: 0;

在您希望动态文本溢出的任何表格单元格中像这样格式化 HTML：

<td>
  <span class="text-overflow-dynamic-container">
    <span class="text-overflow-dynamic-ellipsis" title="...your text again for usability...">
      //...your long text here...
    </span>
  </span>
</td>

另外将所需的min-width（或根本没有）应用到表格单元格。

当然是小提琴：https://jsfiddle.net/9wycg99v/23/

【讨论】：

它弄乱了每列的选定宽度限制，例如如果您为max-width: X 定义了一些列，它们现在可以更宽——我认为这是因为使用了display: flex，但我删除了它并没有发现任何区别......【参考方案10】：

如果你只是想让表格自动布局

不使用使用max-width，或百分比列宽，或table-layout: fixed 等。

https://jsfiddle.net/tturadqq/

它是如何工作的：

第 1 步：让表格自动布局发挥作用。

当一列或多列文字较多时，会尽量缩小其他列，然后将长列的文字换行：

第 2 步：将单元格内容包装在一个 div 中，然后将该 div 设置为 max-height: 1.1em

（额外的 0.1em 用于呈现略低于文本基础的字符，例如 'g' 和 'y' 的尾部）

第 3 步：在 div 上设置 title

这有利于可访问性，并且对于我们稍后将使用的小技巧是必要的。

第 4 步：在 div 上添加 CSS ::after

这是一个棘手的问题。我们设置了一个 CSS ::after 和 content: attr(title)，然后将其放在 div 的顶部并设置 text-overflow: ellipsis。为了清楚起见，我在这里把它涂成红色。

（注意长列现在有一个尾省略号）

第五步：设置div文字的颜色为transparent

我们完成了！

【讨论】：

太棒了，伙计！（@user9645 - 这是不对的：让它与使用 Vue.js 呈现的表格一起工作 - 确保将标题放在 div 上，而不是 td 上） @ChristianOpitz - 是的，我一定把它搞砸了……重试了它，它正在工作。我观察到，当在表格单元格中使用<a> 而不是<div> 时，这种方法会失败。添加word-break: break-all; 解决了这个问题。示例：jsfiddle.net/de0bjmqv 太好了。而且您甚至不必在单元格中使用相同的文本（标题就足够了），然后您不需要 max-height: 1.1em 等 - div 所需要的只是 position: relative;。跨度> 我什至可以通过对它们应用类似的样式来获得一个没有标题/后技巧的工作示例，仅使用 div。 Kjetil Hansen 也这样做了，请参阅下面的答案。【参考方案11】：

当它是百分比表格宽度时，或者您不能在表格单元格上设置固定宽度。您可以申请 table-layout: fixed; 使其生效。

table 
  table-layout: fixed;
  width: 100%;

td 
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid red;

<table>
  <tr>
    <td>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</td>
    <td>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</td>
  </tr>
</table>

【讨论】：

【参考方案12】：

似乎如果您在table 元素上指定table-layout: fixed;，那么您的td 样式应该会生效。不过，这也会影响单元格的大小。

Sitepoint 在这里稍微讨论了表格布局方法： http://reference.sitepoint.com/css/tableformatting

【讨论】：

当您不想指定表格的宽度时，这应该是正确的答案。【参考方案13】：

这是适用于 IE 9 的版本。

http://jsfiddle.net/s27gf2n8/

<div style="display:table; table-layout: fixed; width:100%; " >
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <table style="width: 100%; table-layout: fixed;">
                    <div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">First row. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                </table>
            </div>
            <div style="display:table-cell;">
                Top right Cell.
            </div>
        </div>
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <table style="width: 100%; table-layout: fixed;">
                    <div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Second row - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                </table>
            </div>
            <div style="display:table-cell;">
                Bottom right cell.
            </div>
        </div>
    </div>

【讨论】：

a 作为的直接子级？这似乎不对！ @michiel FYI - 浏览器可以处理表格标签下方的 Div。

【参考方案14】：

为什么会发生这种情况？

this section on w3.org 似乎暗示 text-overflow 仅适用于块元素：

11.1.  Overflow Ellipsis: the ‘text-overflow’ property

text-overflow      clip | ellipsis | <string>  
Initial:           clip   
APPLIES TO:        BLOCK CONTAINERS               <<<<
Inherited:         no  
Percentages:       N/A  
Media:             visual  
Computed value:    as specified

MDN says the same。

此jsfiddle 包含您的代码（进行了一些调试修改），如果将其应用于div 而不是td，则可以正常工作。它还有我能很快想到的唯一解决方法，将td 的内容包装在包含div 的块中。但是，这对我来说看起来像是“丑陋”的标记，所以我希望其他人有更好的解决方案。测试它的代码如下所示：

td, div 
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid red;
  width: 80px;

Works, but no tables anymore:
<div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div>

Works, but non-semantic markup required:
<table><tr><td><div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div></td></tr></table>

【讨论】：

很好，谢谢。我无法从我的标记中删除表格单元格，所以我只是将内容包装在 div 中（它们的宽度设置为单元格的宽度）并在那里应用溢出。像魅力一样工作！

以上是关于表格单元格中的CSS文本溢出？的主要内容，如果未能解决你的问题，请参考以下文章

空白：nowrap 和溢出：隐藏在表格单元格中

如何从表格视图中的选定单元格中获取文本？

允许 s-s-rS 表格单元格溢出到下一个单元格（ala Excel）

如果在表格单元格中，CSS悬停更改其他文本/类的样式不起作用

primeNg DataTable 单元格中的溢出文本

Java JLabel中HTML表格单元格中的文本垂直居中