CODE SNIPPET：

<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)

Answer 1

.primary-article {
   word-break: break-all; 
}

将解决您的问题。这是CSS的一般问题，当一个单词太长时（意味着没有空格）会发生。然后它将突破它的容器。为了避免这种情况，您可以强制断开单词，也可以将容器设置为overflow：hidden;削减溢出的文字。

小提琴：https://jsfiddle.net/77w36oqd/

编辑：实际上，在您的情况下，不仅<td>的内容会爆发，而且.primary-article容器中的其他元素如<h3>也会爆发。因此，您可以强制整个容器进行分词。

如何使表适合一定的大小

CODE SNIPPET：

1 个答案: