CSS 如何避免 twitter bootstrap 中的文本溢出？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15308061/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to avoid text overflow in twitter bootstrap?
提问by Priyanka
I'm new to Twitter Bootstrap. I wrote following HTML:
我是 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>
The CSSfor the hideOverflowclass is:
在CSS为hideOverflow类：
.hideOverflow
{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
But it is showing me result as:
但它显示我的结果为：
Then I changed 'row-fluid' to span12and then it is showing the following result:
然后我将“row-fluid”更改为span12，然后显示以下结果：
Why is my hideOverFlowclass not working with the row-fluidclass?
为什么我的hideOverFlow班级不与row-fluid班级合作？
What do I need to change in order to get the same result as the row-fluidclass?
为了获得与row-fluid课程相同的结果，我需要更改什么？
回答by SaurabhLP
make the html structure like this...
像这样制作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>
The CSS:-
CSS：-
.hideOverflow
{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
width:100%;
display:block;
}
回答by Leniel Maccaferri
Of course the question title is broad... it'll depend on Bootstrap's structure you're working with since it may have CSS rules which can interfere with your code.
当然，问题标题很宽泛……这取决于Bootstrap您正在使用的 结构，因为它可能具有会干扰您的代码的 CSS 规则。
In my situation I have a structure with row-fluid, span#s and labelCSS classes like this:
在我的情况下，我有一个包含row-fluid, span#s 和labelCSS 类的结构，如下所示：
<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>
Taking advantage of the code provided by SaurabhLPI used this shorten CSSversion which did it for me:
利用SaurabhLP提供的代码，我使用了这个CSS为我完成的缩短版本：
.standard-description {
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
display: block;
}
It correctly places an ellipsisin the text inside the spanwhen the title is very long.
当标题很长时，它会正确地ellipsis在文本中放置一个span。
As a plus: if you want to make the text break line, then you can try this CSSinstead:
作为一个加号：如果你想让文本换行，那么你可以试试这个CSS：
.standard-description {
white-space:pre-line;
}
回答by Shail
You are not using row-fluid in the correct place , thats why you are seeing the issue. Row-fluid creates a row inside which you can create columns using span classes , and since row-fluid uses percentage it will expand to fill all available horizontal space when on a large screen, and shrink columns to keep them from vertically stacking as the screen resizes.
您没有在正确的位置使用 row-fluid，这就是您看到问题的原因。Row-fluid 创建一行，您可以在其中使用 span classes 创建列，并且由于 row-fluid 使用百分比，它会在大屏幕上扩展以填充所有可用的水平空间，并缩小列以防止它们垂直堆叠为屏幕调整大小。
So the basic principle is to use row-fluid this way :
所以基本原理是这样使用 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>
Thats why when you removed row-fluid and replaced it with span12 your issue was resolved . Also the best practice is to assign span with a class with property of width :100% , like :
这就是为什么当您删除 row-fluid 并将其替换为 span12 时，您的问题已解决。此外，最佳实践是为 span 分配一个属性为 width :100% 的类，例如：
.text-span{
{
width: 100%;
}
Then use it in your code like :
然后在您的代码中使用它，例如：
<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>
Avoid using span12 inside a span4 .
避免在 span4 中使用 span12 。
回答by Amrendra
Add word-wrap: break-word in your DIV. Write this:
在 DIV 中添加 word-wrap: break-word。写这个：
.span4{
width: 700px;
word-wrap: break-word;
}
