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>
