如何避免文本溢出在twitter bootstrap？ [英] how to avoid text overflow in twitter bootstrap?

问题描述

我是Twitter Bootstrap的新手。我写了以下HTML：

I'm new to Twitter Bootstrap. I wrote following 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 c> hideOverflow class is：

The CSS for the hideOverflow class is:

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

但它显示结果为：

But it is showing me result as:

然后我将row-fluid更改为 span12 ，然后显示以下结果：

Then I changed 'row-fluid' to span12 and then it is showing the following result:

为什么是 hideOverFlow 类不与 row-fluid 类一起使用？

Why is my hideOverFlow class not working with the row-fluid class?

我需要更改以获得相同的结果为 row-fluid 类？

What do I need to change in order to get the same result as the row-fluid class?

推荐答案

像这样...

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

这篇关于如何避免文本溢出在twitter bootstrap？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！