正确使用文本溢出

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