twitter-bootstrap Bootstrap 3 表溢出面板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22978990/
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
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-21 20:28:12 来源:igfitidea点击:
Bootstrap 3 table overflow out of panel
提问by conmen
I'm using bootstrap table inside a panel, which is overflow outside of panel if contains long information, how can it be fix?
我在面板内使用引导表，如果包含长信息，它会在面板外溢出，如何修复？
<div class="col-sm-3" role="complementary">
<div class="panel panel-default">
<div class="panel-body table-responsive">
<table class="table table-bordered table-condensed f11">
<tr>
<td colspan="2" align="center" class="info"><b>Info</b></td>
</tr>
<tr>
<td width="35%"><b>Agent</b></td>
<td width="65%">Luckystar Auto</td>
</tr>
<tr>
<td><b>WhatsApp</b></td>
<td>5412876542</td>
</tr>
<tr>
<td><b>WeChat</b></td>
<td>Luckystar88899</td>
</tr>
<tr>
<td><b>Facebook</b></td>
<td>www.facebook.com/luckystar88899-abcd</td>
</tr>
</table>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<p><div id="map-canvas"></div></p>
</div>
</div>
回答by Zim
It will happen since the url link is too wide.
由于 url 链接太宽，会发生这种情况。
A workaround is to use CSS ellipsis to truncate the cell contents as needed:
解决方法是使用 CSS 省略号根据需要截断单元格内容：
.table {
table-layout:fixed;
}
.table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
