如何在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>

hideOverflow类的CSS如下：

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

但它向我展示的结果是： 然后我把“row-fluid”改成了“span12”，然后它展示的结果如下所示： 为什么我的“hideOverFlow”类与“row-fluid”类不起作用？

我需要改变什么才能得到与“row-fluid”类相同的结果？

- Priyanka

---

我认为可以减小那个div的大小或者对其应用padding-right... 同时移除row-fluid，因为它没有意义。 - SaurabhLP

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

- SaurabhLP

---

我在父级div中有其他的span元素，所以我不能使用你的建议。 - Priyanka

主要是你必须提供文本溢出容器，无论是 span 还是 div，它需要有一定的宽度... 可能是以百分比为单位... 请查看更新... - SaurabhLP

为什么它应该直接应用于span？我尝试将其应用于div，但那样不起作用。 - Mohammed Noureldin

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。

另外，如果您想让文本换行，则可以尝试使用以下CSS：

.standard-description {

    white-space:pre-line;

}

- Leniel Maccaferri

Answer 3

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

所以基本原则是这样使用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。

- Shail

Answer 4

在你的DIV中加入word-wrap: break-word。写成这样：

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

- Amrendra