html - 如何使大量文本适合 html 表格单元格

Question

我在 Angular/html/css 中创建了一个包含单元格的表格，并且我的单元格必须能够容纳大量文本。我的问题是文本会溢出单元格，我需要它正好适合里面，这样看起来就不错。

这是我的 Angular html 代码:

.theTable {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  max-width: 450px;
  width: 200%;
  border: 2px solid #9e9e9e;
  text-align: left;
  padding: 15px;
  font-size: 2vh;
}

td {}

tr:nth-child(even) {
  background-color: #d3d3d3;
}

<div class="theTable">
  <table>
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>ErrorMessage</th>
        <th>StackTrace</th>
      </tr>
    </thead>
    <tr *ngFor="let item of ListOfStuff">
      <td>{{item.id}}</td>
      <td>{{item.automatedTestName}}</td>
      <td>{{item.errorMessage}}</td>
      <td>{{item.stackTrace}}</td>
    </tr>
  </table>
</div>

Answer 1

尝试在您的td中使用[word-wrap:break-word]

td {
  word-wrap: break-word
  width: 200px;
}