html - 正确使用文本溢出

Question

我有以下问题:

如您所见，由于元素不够长，文本被截断了，我希望太长的文本能够隐藏或变成省略号。我已经尝试了这两种方法，但没有任何反应:

text-overflow:ellipsis
overflow:hidden

为什么它们不起作用？？

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;
}

Answer 1

为 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

编辑:

添加 float 属性以对齐每个旁边的 span 元素，如下所示。

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

Updated Demo