April 24, 2012

Cut off effect with overflow:hidden

Question by Team-JoKi

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 by Mark Schultheiss

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>

Answer by Starx

Configure it to display as inline-block

.should-cut-off
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 70%;
    display: inline-block;
}

Demo

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!