text-overflow：省略号在table-cell中没有宽度 [英] text-overflow: ellipsis in table-cell without width

问题描述

我试图在中间单元格中实现响应表宽度 text-overflow：ellipsis; ，如下所示：

I'm trying to achieve a responsive table width text-overflow: ellipsis; in the middle cell that looks like this:

|按钮1 |一个一行的文本太长，必须... | Button 2 |

整个表格应该有 width：100％; 与设备一样大。我不能在按钮1 或按钮2 上设置固定宽度，因为应用程序是多语言的$ c> max-width ）。

The whole table should have width: 100%; to be as large as the device. I can't set a fixed width on Button 1 nor Button 2 since the application is multilingual (a max-width should be possible though).

我可以尝试任何我想要的， .. 。仅在我设置固定宽度时出现。如何在没有JavaScript帮助的情况下告诉中间单元使用可用空间？

I can try whatever I want, the ... only appears when I set a fixed width. How can I tell the middle cell to "use the space available" without the help of JavaScript?

推荐答案

我的解决方案是将单元格的内容包装在一个表格中，并且 table-layout：fixed 和 width：100％。

My solution consists in wrapping the cell's contents inside a table with table-layout: fixed and width: 100%.

a href =http://jsfiddle.net/V83Ae/38/> 演示 。

See the demo.

这是完整的解决方案：

<table class="main-table">
    <tr>
        <td class="nowrap">Button 1</td>
        <td>
            <table class="fixed-table">
                <tr>
                    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus doloremque magni illo reprehenderit consequuntur quia dicta labore veniam distinctio quod iure vitae porro nesciunt. Minus ipsam facilis! Velit sapiente numquam.</td>
                </tr>
            </table>
        </td>
        <td class="nowrap">Button 2</td>
    </tr>
</table>

.main-table {
    width: 100%;
}

.fixed-table {
    /* magic */
    width: 100%;
    table-layout: fixed;

    /*not really necessary, removes extra white space */
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;
}
.fixed-table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nowrap {
    /* used to keep buttons' text in a single line,
     * remove this class to allow natural line-breaking.
     */
    white-space: nowrap;
}

---

侧面按钮的意图，因此我使用 white-space：nowrap 将它们保持在同一行。根据用例，您可能希望应用 min-width ，并让它们自然换行。

---

It's not really clear what's the intent for the side buttons, hence I've used white-space: nowrap to keep them in the same line. Depending on the use case, you may prefer to apply a min-width and let them line-break naturally.

这篇关于text-overflow：省略号在table-cell中没有宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！