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

我是Twitter引导的新手。我编写了以下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>

但它给我的结果是：

然后我将“row fluid”更改为

span12

，然后它显示以下结果：

为什么我的

hideOverFlow

类不能与

行流体

类一起工作

---

为了获得与

行流体

类相同的结果，我需要更改什么？

使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>

---

在DIV中添加单词换行符：断开单词。写下以下内容：

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

---

您没有在正确的位置使用row流体，这就是您看到问题的原因。Row fluid创建一行，在该行中可以使用跨度类创建列，由于Row fluid使用百分比，因此在大屏幕上，它将扩展以填充所有可用的水平空间，并收缩列以防止在屏幕调整大小时垂直堆叠

因此，基本原则是以这种方式使用row流体：

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

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

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

@ActionLink（item.Name，“Details”，新的{id=item.id}，新的{@class=“JumpLinks”，@style=“font-size:13px；font-weight:bold；”}）

---

避免在span4中使用span12。

当然，问题的标题很宽泛。。。它将取决于您正在使用的

引导程序的结构，因为它可能有可能干扰您的代码的CSS规则

在我的情况下，我有一个包含
行流体
，
span#
s和
标签
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>

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

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

.standard-description {

    white-space:pre-line;

}

我想减小那个div的大小或者在它上面加上填充。。。同时删除行流体应用它是没有意义的…我在父div中有其他span元素。因此我不能使用您的建议。主要问题是您必须提供文本溢出容器，无论它是span还是具有一定宽度的div。。。可能在%。。。查看更新…为什么要将其直接应用于跨度？我试着把它应用到div上，但是没有用。
  <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>

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

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

.standard-description {

    white-space:pre-line;

}