Question

我遇到的问题是我在一个单元格中有一个非常大的值：

43003A005C00570069006E0064006F00770073005C00730079007300740065006D00330032005C0076006D00470075006500730074004C00690062002E0064006C006C00000043003A005C00500072006F006700720061006D002000460069006C00650073005C0056004D0077006100720065005C0056004D007700610072006500200054006F006F006C0073005C0076006D0053007400610074007300500072006F00760069006400650072005C00770069006E00360034005C0076006D0053007400610074007300500072006F00760069006400650072002E0064006C006C000000

它的作用是整个表格变得比它应该更大。

我现在将table-layout:fixed添加到表中，整个表都会调整大小，而不仅仅是具有此值的列。

我想要的是所有其他列都有他们需要的大小，但只有最后一列应该重新排列（使用多行）。

/**
  * Returns a table with the values from a query
  */
function tableizeQryRes($arr) {
  $isFirst=true;
  $tbl = '<table width="100%" border="1" cellpadding="2" frame="box" rules="all" style="table-layout:fixed">';
  foreach ($arr as $key => $val) {
    //echo $key;
    if ($isFirst) {
      $tblHeader = '<tr align="center" valign="middle"><td></td>';
      $tblBody = '<tr><td>'.$key.'</td>';
      foreach ($val as $sub_key => $sub_val) {
        if ($sub_key == "Msg") {
          $tblHeader .= '<td style="word-wrap:break-word; width:40%">'.$sub_key.'</td>';
          $tblBody .= '<td style="word-wrap:break-word; width:40%">'.$sub_val.'</td>';
        } else {
          $tblHeader .= '<td>'.$sub_key.'</td>';
          $tblBody .= '<td>'.$sub_val.'</td>';
        }
      }
      $tblHeader .= '</tr>';
      $tblBody .= '</tr>';
      $tbl .= $tblHeader;
      $tbl .= $tblBody;
      $isFirst=false;
    } else {
      $tbl .= '<tr><td>'.$key.'</td>';
      foreach ($val as $sub_key => $sub_val) {
        if ($sub_key == "Msg") {
          $tbl .= '<td style="word-wrap:break-word; width:40%">'.$sub_val.'</td>';
        } else {
          $tbl .= '<td>'.$sub_val.'</td>';
        }
      }
      $tbl .= '</tr>';
    }
  }
  $tbl .= '</table>';

  echo '<div style="max-width:100%; hyphens:auto">';
  echo $tbl;
  echo '<br/>';
  echo '<br/>';
  echo '</div>';
}

如果我加上某事。与style="word-wrap:break-word; width:40%"和table-layout:fixed一样，其他单元格也已修复，不再适应。

BTW。：所有列的长度都是可变的（大约有150 000行）。前5列很小，只有6.列包含一条消息，有时带有空格，有些则没有。

Answer 1

CSS3文本模块允许您打破长词，以便使用word-wrap: break-word包围多行。但是，在某些情况下会发生什么因为一个长长的不断字，所以在长字之前是一个很大的白色间隙从一个新行开始，即使短词可以跟随长词。

解决此问题的一种方法是使用white-space: pre-wrap和word-break: break-all，这样可以防止在长不间断的单词之前形成长的空格。

然而，不好的一面是，一些小词可能会缠绕到第二行。

您有两种选择，word-wrap方法可以在长的非破坏词之前留下较大的间隙，或whtie-space/word-break方法可以留下一些小词包裹大约两行。

我认为这就是你可以使用CSS3。其他任何东西都需要一些JavaScript 辅助解决方案。

＆＃13;

table {
  border: 1px dotted blue;
  table-layout: fixed;
  width: 100%;
}
table td {
  border: 1px dashed blue;
  vertical-align: top;
}
table td.wrapping {
  width: 350px;
  white-space: pre-wrap;
  word-break: break-all
}

＆＃13;

<table>
  <tr>
    <td>a regular table cell with some text</td>
    <td class="wrapping">some short words in the text andaverylongword to fill up the line 43003A005C00570069006E0064006F00770073005C00730079007300740065006D00330032005C0076006D00470075006500730074004C00690062002E0064006C006C00000043003A005C00500072006F006700720061006D002000460069006C00650073005C0056004D0077006100720065005C0056004D007700610072006500200054006F006F006C0073005C0076006D0053007400610074007300500072006F00760069006400650072005C00770069006E00360034005C0076006D0053007400610074007300500072006F00760069006400650072002E0064006C006C000000 and a few words at the end
    </td>
  </tr>
</table>

＆＃13;

Answer 2

尝试在包含元素上设置word-wrap:break-word。

示例：jsFiddle

HTML：

<table>
    <tr>
        <td>Column One</td>
        <td>Column Two</td>
        <td class="wrap">43003A005C00570069006Eetc...</td>
    </tr>
</table>

CSS：

table {
    table-layout:fixed;
    width:100%;
}

.wrap {
    width:40%;
    word-wrap:break-word;
}

Answer 3

在firefox上你必须使用“max-width”而不仅仅是“width”，否则它将在“layout-table：auto”的表中被忽略。

因此，如果您不想使用“layout-table：auto”，您只需将这样的类分配给您想要限制的列

.wrap {
    word-wrap: break-word;
    max-width: 100px;
}

像＆＃34; table-layout：fixed＆＃34;但只适用于一个表格列

3 个答案: