Using Text Overflow Correctly

Question

I have the following problem:

enter image description here

As you can see the text is being cut off because the element is not long enough, I want the text that is too long to either hide or become ellipsis. I have tried both of these and nothing happens:

text-overflow:ellipsis
overflow:hidden

Why dont they work ??

HTML:

<div class="header">
<div class="ico" style="background-image:url(ImgSport.ashx?IDBook=90&amp;IDSport=468&amp;);">

    </div>
    <span><span id="lblGruppo">International</span> - <span id="lblEvento">Fifa World Cup 2014 - Best South American Country</span></span>
    <div class="btn">
        <a href="javascript:CloseBoxOdds(40256);" id="linkChiudi" class="lnkOddsCls" title="Close"></a>
        <a href="../Sport/OddsPrintOption.aspx?IDEvento=40256" id="linkStampa" class="lnkOddsPrn" title="Print event"></a>
        <a href="javascript:(RefreshEventAsync(40256,-1,sTxtEventi, 1,1))" id="linkRefresh" class="lnkOddsRfh"></a>
        <a href="../Sport/Groups.aspx" class="lnkOddsBack" title="Back to selection page"></a>
        <a id="linkMainStats" title="Stats" class="lnkOddsStats" target="_blank"></a>
    </div>
</div>

CSS:

.divOdds .header > SPAN {
 background-color: #063a08;
 padding: 0px 0px 0px 12px;
}
 .divOdds .header .ico {
 background-color: #063a08;
 position: absolute;
 top: 0px;
 left: 4px;
 height: 20px;
 width: 25px;
 background-size: 16px;
 background-repeat: no-repeat;
 background-position: center center;
}
.divOdds .header {
 border-radius: 5px;
 position: relative;
 height: 20px;
 line-height: 20px;
 padding-left: 25px;
 text-transform: uppercase;
 font-size: 13px;
 margin-bottom: 5px;
}
#lblEvento {
    text-overflow:ellipsis;
    overflow: hidden;
}

which browser do they fail to work? also in your css code, its not apparent where you applied the overflow. remember, you need to specify when to stop, with i.e. a fixed width. — ericosg
– ericosg, Commented Jul 7, 2014 at 12:01
They fail to work in Chrome, I applied it to the lblEvento label. How does the fixed width work ? — Michael
– Michael, Commented Jul 7, 2014 at 12:05
Show the code where you applied it to the label please. Your CSS doesn't have it, either. — ericosg
– ericosg, Commented Jul 7, 2014 at 12:09

Suresh Ponnukalai · Accepted Answer · 2014-07-07 12:45:51Z

2

Apply text-overflow for your span with id "lblEvento".

 #lblEvento
{
white-space: nowrap;
text-overflow: ellipsis;
width: 200px; /* You need to decide how much you want to show*/
display: block;
overflow: hidden;
}

Simple Demo

EDIT:

Add float property for aligning the span element next to each like below.

 #lblEvento
{
white-space: nowrap;
text-overflow: ellipsis;
width: 200px;
display:block;
overflow: hidden;
float:left;
}
#lblGruppo{float:left;}

Updated Demo

edited Jul 7, 2014 at 12:45

answered Jul 7, 2014 at 12:21

Suresh Ponnukalai

14k5 gold badges36 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Michael Over a year ago

Tried applying this, it works but pushes the text onto a new line as well. Tried setting display to inline-block and this solves the new line problem but for some reason this pushes the previous span (lblGruppo) down by a few pixels leaving them not aligned correctly

Suresh Ponnukalai Over a year ago

assign inline-block for the previous span also.

Michael Over a year ago

Applied it to the lblGruppo span but it does nothing

Michael Over a year ago

Okay so I found a solution, however I do not understand why it works. Both the spans original height is 16px, if I set display:inline-block on lblEvento then the text overflow works but lblGruppo is pushed down. However if i then add a height of 15px to lblEvento the spans align up again ?! Any smaller than 15 and lblEvento starts to be pushed down and hidden, any bigger than 15 and lblGruppo is pushed down

Suresh Ponnukalai Over a year ago

Don't do like that. Not a correct way. I will update my answer.

Collectives™ on Stack Overflow

Using Text Overflow Correctly

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related