如何避免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;
}

Answer 2

当然问题标题很广泛......它取决于你正在使用的Bootstrap结构，因为它可能有CSS规则会干扰你的代码。

在我的情况下，我的结构包含row-fluid，span#和label这样的CSS类：

<div class="row-fluid">    
    <div class="span12">
        <div id="standard-placeholder" style="display: none;">
            @Html.Label(Localization.Title)
            <span class="label label-warning standard-description"></span>
        </div>
    </div>
</div>

利用SaurabhLP提供的代码，我使用了缩短CSS版本，为我做了这个：

.standard-description {
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: block;
}

当标题很长时，它会在ellipsis内的文本中正确放置span。

作为一个加号：如果你想创建文本分隔线，那么你可以试试这个CSS：

.standard-description {

    white-space:pre-line;

}

Answer 3

您没有在正确的位置使用排液，这就是您看到问题的原因。 Row-fluid创建了一个行，您可以在其中使用span类创建列，并且由于row-fluid使用百分比，它将在大屏幕上展开以填充所有可用的水平空间，并缩小列以防止它们垂直堆叠为屏幕调整大小。

所以基本原则是以这种方式使用行液：

<div class="row-fluid">
   <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>
      </span>
   </div>
</div>

这就是为什么当您删除row-fluid并将其替换为span12时，您的问题已得到解决。 最佳做法是为span指定一个宽度为100％的类，如：

.text-span{
         {
    width: 100%;
  }

然后在您的代码中使用它，如：

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

避免在span4中使用span12。

Answer 4

在DIV中添加自动换行：break-word。写下这个：

.span4{
    width: 700px;
    word-wrap: break-word;
}