我有这张桌子，它比背景盒子大。
我怎样才能使桌子适合这个bg盒子？
jsFiddle
代码片段：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<body style="">
<div class="content-background" style="background-color: #4285f4; height: 398px; position: absolute; width: 100%; top: 60px; z-index: -1;"></div>
<div class="appbar-container" style="background-color: #4285f4; color: #fff; height: auto; width: 100%;">
<div class="appbar-top" style="padding-left: 80px; overflow: hidden;"><span class="" style="line-height: 64px; font-size: 20px;" itemprop="title">Failures in 1.0.705</span>
<p style="font-weight: 300; display: inline-block; float: right; margin: 10px; padding-right: 24px;">save date: 06:44:41 03-Sep-02016</p>
</div>
</div><span class="primary-container"><div class="page-width-container" style="float: left; margin-left: 128px; width: 832px; background-color: #fff; box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); padding: 64px; position: relative;"><span class="primary-article" role="main"><span><table class="table table-bordered table-striped" border="1" style="width:100%"><th style="width:70%">Error</th><th>Percent (% from total)</th><tr><td rowspan="2">com.github.rholder.retry.RetryException: Retrying failed to complete successfully after 3 attempts. previous error was: java.lang.RuntimeException: java.lang.Exception: Failed to handle request </td><td>59.35% ( 3.65% )</td></tr><tr></tr><tr><td rowspan="2">com.github.rholder.retry.RetryException: Retrying failed to complete successfully after 3 attempts. previous error was: linqmap.p2p.NoAvailableServerException: Could not find server to send to for Routing.[_all_] (resgistry: GeoRegistryClientConfig) stack:linqmap.p2p.NoAvailableServerException: Could not find server to send to for Routing.[_all_] (resgistry: GeoRegistryClientConfig)
at linqmap.p2p.impl.ClientP2PRegistryAccess.getServers(ClientP2PRegistryAccess.java:409)最佳答案
.primary-article {
word-break: break-all;
}
将解决您的问题。
这是CSS的普遍问题，当单词过长（表示之间没有空格）时会发生。然后它将从它的容器中弹出。为了避免这种情况，您可以强行中断单词，也可以将容器设置为溢出：hidden;剪切溢出的文本。
小提琴：https://jsfiddle.net/77w36oqd/
编辑：实际上，在您的情况下，不仅
<td>的内容出现了，而且.primary-article容器中的其他元素（例如<h3>）也爆发了。因此，您可以对整个容器强制使用分词。