Question

I’d like to create the following in css:

I’ve a long text which should be displayed on a single line, and a hyperlink next to this text (this will later be placed in the header of the website, that’s why it needs to be a single line).

When the there is little room on the screen, I want the string to be cut off (“testtest..” – hyperlink). When the window is resized and there is more room, I want the text to be shown (as much as possible (e.g. “testtesttesttesttesttesttest.. – hyperlink”).

The problem that I’m having is that the string doesn’t want to be cut off. It always remains in its full size.

Here is a link to the JSFiddle: http://jsfiddle.net/PNGDw/1/

note: here I’m trying it with a table, I’ve also tried it with floats, but that didn’t work either.

Thanks for the help

Answer 1

You have a 5em width on the table so it will not resize. Use something like:

<style>
    *
    {
        margin: 0;
        padding: 0;
    }

    body
    {
        background: #5e8834;
    }

    div.wrapper        {
        background: #456326;
        border: 3px solid #547a2f;
        margin: 2em;
        width: 100%;
    }
    div.contents{    display:inline-block;}
    .should-cut-off 
    {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 70%;
    }
</style>
<div id='wrapper'>
    <div class="should-cut-off contents">Test - test - test - Test - test - test - Test - test - test - Test - test - test
            - Test - test - test
    </div>
    <div class='contents' style="width:15%;">
        <a href="#">[this is a link]</a>
    </div>
</div>