1

I am building a table that has truncated headers and content using the :after selector.

I want to be able to move the :after content onto a new line only where the header text is truncated, is there a way of doing this only using CSS?

I am currently using jQuery and window.resize listeners to implement a solution similar to the one found here: HTML - how can I show tooltip ONLY when ellipsis is activated but would prefer to be able to do it without the extra overhead of the jQuery and the listeners

An example of the HTML and CSS is:

    <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>
Community
  • 1
  • 1
stephenjgray
  • 15
  • 1
  • 6
  • Can you expand your "minimal" example to be "complete" and "verifiable"? See: [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) – gfullam May 28 '15 at 13:33

1 Answers1

0

If you want your :after element content should come on next line then try following code. 

th:after {
    content: ":";
    display:block;
    clear:both:
}
Nilesh Mahajan
  • 3,506
  • 21
  • 34
  • This would work but it would put the ":" on a new line regardless of truncation; I want the :after content on a new line only on truncation – stephenjgray May 28 '15 at 14:41