如何避免twitter bootstrap中的文本溢出？

Question

我是Twitter Bootstrap的新手.我写了以下HTML:

<div class="span4">
   <span class="row-fluid hideOverflow">
   @Html.ActionLink(item.Name, "Details", new { id = item.Id }, new { @class = "JumpLinks", @style = "font-size:13px;font-weight:bold;" })
   </span>
</div>

在CSS为hideOverflow类:

.hideOverflow
{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

但它显示我的结果如下:

然后我将'row-fluid'更改为span12,然后显示以下结果:

为什么我的hideOverFlow班级不上班row-fluid？

为了获得与row-fluid班级相同的结果,我需要更改什么？

Answer 1

像这样制作html结构......

<div class="span4">
   <span class="hideOverflow">@Html.ActionLink(item.Name, "Details", new { id = item.Id }, new { @class = "JumpLinks", @style = "font-size:13px;font-weight:bold;" })</span>
</div>

CSS: -

.hideOverflow
{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    width:100%;
    display:block;
}