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

【问题标题】：how to avoid text overflow in twitter bootstrap?如何避免 twitter bootstrap 中的文本溢出？
【发布时间】：2013-02-24 19:51:59
【问题描述】：

我是 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 类相同的结果，我需要进行哪些更改？

【问题讨论】：

我认为减小该 div 的大小或对其应用 padding-right... 也删除 row-fluid 应用它没有意义...

标签： twitter-bootstrap css

【解决方案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;
}

【讨论】：

我在父 div 中有其他 span 元素。所以我不能使用你的建议。
主要是你必须提供文本溢出容器，无论它是一个跨度还是具有一定宽度的 div...可能在 %...查看更新...
为什么要直接应用于span？我尝试将它应用到 div 上，但不起作用。

【解决方案2】：

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

在我的情况下，我有一个带有 row-fluid、span#s 和 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;
}

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

另外：如果你想使文本换行，那么你可以试试这个CSS：

.standard-description {

    white-space:pre-line;

}

【讨论】：

【解决方案3】：

您没有在正确的地方使用 row-fluid ，这就是您看到问题的原因。 Row-fluid 创建一个行，您可以在其中使用 span classes 创建列，并且由于 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 分配一个属性为 width :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。

【讨论】：

【解决方案4】：

在您的 DIV 中添加 word-wrap: break-word。写这个：

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

【讨论】：