Question

我正在构建一个使用：after选择器截断标题和内容的表。

我希望能够将:after内容移动到新行，其中标题文本被截断，是否有办法仅使用CSS执行此操作？

我目前正在使用jQuery和window.resize侦听器来实现类似于此处找到的解决方案：HTML - how can I show tooltip ONLY when ellipsis is activated但更愿意能够在没有jQuery和侦听器的额外开销的情况下执行此操作

HTML和CSS的一个例子是：

    <style>
        table, th, td {
            max-width: 75%;
            table-layout: fixed;
            border: 1px solid black;

        }

        th {
            white-space: nowrap;
            overflow-x: hidden;
            text-overflow: ellipsis;
        }

        th:after {
            content: ":";
        }

    </style>


    </head>
    <body>

    <table width="600px">
    <thead>
    <tr>
        <th width="5%">I'm a very long table header that is going to get truncated in the browser</th>
        <th width="10%">small</th>
        <th width="20%">medium</th>
        <th width="65%">large</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>One</td>
        <td>Java</td>
        <td>01/01/2010</td>

    </tr>
    <tr>
        <td>2</td>
        <td>Two</td>
        <td>C</td>
        <td>01/02/2010</td>
    </tr>
    </tbody>
</table>
</body>
</html>

Answer 1

如果您希望:after元素内容出现在下一行，请尝试使用以下代码。

th:after {
    content: ":";
    display:block;
    clear:both:
}

移动：将元素移到文本截断的新行

1 个答案: