CODEWITHSUNDEEP
htmlcssellipsis
Will Jenkins
Will Jenkins

Reputation: 9787

Line of overflowing text with ellipsis and a div on the end

I have a long line of dynamic text followed by a button image. When the width is such that the content overflows, I would like the text to be trimmed with an ellipsis, yet keep the button visible.

So from this:

This is my long text blah blah [button]

To this:

This is my long... [button]

I can't get the button to stick to the end of the text. If the div with the text is set to display:inline-block then the ellipsis no longer appears. The text changes so I can't use fixed widths.

Here's the basic structure:

<div>
    <div id="text">A long line of text that overflows when window is narrow</div>
    <div id="button"></div>    
</div>

with some css:

#text {
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display:block;
    padding-top:20px;
    padding-right:50px;

}
#button{
    background-color:lightblue;
    height:20px;
    width:30px;
    display:inline-block;
}

with a corresponding fiddle for tweaking purposes.

Upvotes: 0

Views: 2407

Answers (2)

Will Jenkins
Will Jenkins

Reputation: 9787

I've made it work finally - using a flex box... here's a fiddle

<div id="container">
        <div id="text">A long line of text that overflows when window is narrow</div>
        <div id="button"></div>    
</div>

#container{
    display:flex;
}
#text {
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
#button{
    background-color:lightblue;
    height:20px;
    min-width:30px;
    width:30px;
}

Upvotes: 1

badAdviceGuy
badAdviceGuy

Reputation: 2090

Here is one solution that may work for you.

Demo Fiddle

You make use of the containing div to make the others display: inline-block and then give the text div a % width so the overflow can happen. You can make the % larger or smaller, but I found 80% worked nicely. It will still wrap when you size the window very narrow since the button has a fixed width.

HTML:

<div class="container">
    <div id="text"><span>A long line of text that overflows when window is narrow</span></div>
    <div id="button"></div>    
</div>

CSS:

.container{    
    padding-top:20px;
    padding-right:50px; 
}

.container > div {display: inline-block;}

#text {
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 80%;
}

#button{
    background-color:lightblue;
    height:20px;
    width:30px;
}

Upvotes: 0

Related Questions