Question

I want to make a table with two columns. The first one with a text caption and second one with a link. If the link is bigger than available space than I want to overflow with "...". This is what I've tried:

<html>

<style>
    table {
        width: 100px;
        border: dotted;
    }

    td {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
</style>

<body>
    <table>
        <tr>
            <td colspan=2>
                First name and last name
            </td>
        </tr>
        <tr>
            <td>
                Info:
            </td>
            <td>
                <a href="google.pl">CLICKKKKKKKKKKKKKKXX</a>
            </td>
        </tr>
    </table>
</body>
</html>

but it doesn't overflow and table gets bigger than 100px. I've tried adding max-width to tr{} but it also doesn't work.

What is the solution for that?

Answer 1

试试这个

table{table-layout:fixed;}

Answer 2

您希望溢出文字包含...，但您还没有提到阈值 max-width 值来触发溢出和替换...

的剩余文字

试试这个：

td
{
  width: 50px;
  max-width: 75px;

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

工作示例：JsFiddle

<a> overflow in html table

2 个答案: