Question

我正在根据以下代码构建一个简单的表格元素：

.simple-table {
  width: 100%;
  font-size: 12px;
  display: flex;
  flex-direction: column;
}

.simple-table-title {
  font-size: 14px;
}

.simple-table-big-font {
  font-size: 16px;
}

.simple-table table {
  width: 100%;
  border-collapse: collapse;
  background-color: black;
}

.simple-table thead,
tbody {
  width: 100%;
}

.simple-table table tbody td {
  padding: 5px 10px 5px 10px;
  background-color: grey;
  color: white;
}

.simple-table table thead td {
  padding: 5px 10px 5px 10px;
  padding: 5px 10px 5px 10px;
  background-color: grey;
  color: white;
}

.simple-table-title {
  padding-bottom: 5px;
}

<div class="simple-table ">
    <div class="simple-table-title">Title:</div>
    <table>
      <thead>
        <tr>
          <td>Column 1:</td>
          <td>Column 2:</td>
          <td>Column 3:</td>
          <td>Long Column:</td>
          <td>Long Column:</td>
          <td>Very Long Column:</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>THIS IS A VERY VERY LONG LONG TEXT</td>
          <td>THIS IS A VERY VERY LONG LONG TEXT</td>
          <td>THIS IS A VERY VERY LONG LONG TEXT</td>
          <td>THIS IS A VERY VERY LONG LONG TEXT</td>
          <td>THIS IS A VERY VERY LONG LONG TEXT</td>
          <td>THIS IS A VERY VERY LONG LONG TEXT</td>
        </tr>
      </tbody>
    </table>
  </div>

这应该可以正常工作，但是当我将此组件放入应用程序时，表行在我的单词中间中断了：

我需要在空白处打断行，只有当单词太大时才打断。

由于该表是在数十个类和div链中呈现的，所以我不知道发生了什么。

如何修复simple-table类以确保具有所需的行为（在空白处中断，并且仅当单词对于水平空间而言太大时才在单词上中断）。

Answer 1

您输入的代码在我尝试时执行正常。我认为属性断字可能设置为全部断字或其他地方的断字。尝试强迫它使用“正常”。

.simple-table {
  width: 100%;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  word-break: normal;
}

Answer 2

我已经修复了此检查在台式机或PC屏幕上的作用

 .simple-table {
  width: 100%;
  font-size: 12px;
  display: flex;
  flex-direction: column;
}

.simple-table-title {
  font-size: 14px;
}

.simple-table-big-font {
  font-size: 16px;
}

.simple-table table {
  width: 100%;
  border-collapse: collapse;
  background-color: black;
}

.simple-table thead,
tbody {
  width: 100%;
}

.simple-table table tbody td {
  padding: 5px 10px 5px 10px;
  background-color: grey;
  color: white;
}

.simple-table table thead td {
  padding: 5px 10px 5px 10px;
  padding: 5px 10px 5px 10px;
  background-color: grey;
  color: white;
}

.simple-table-title {
  padding-bottom: 5px;
}
        td {
            width: 16.66;
            font-size: 14px;
        }
        body {
            margin: 0;
        }

<html>
    <body>
        <div class="simple-table ">
            <div class="simple-table-title">Title:</div>
            <table>
            <thead>
                <tr>
                <td>Column 1:</td>
                <td>Column 2:</td>
                <td>Column 3:</td>
                <td>Long Column:</td>
                <td>Long Column:</td>
                <td>Very Long Column:</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                <td>THIS IS A VERY VERY LONG LONG TEXT</td>
                <td>THIS IS A VERY VERY LONG LONG TEXT</td>
                <td>THIS IS A VERY VERY LONG LONG TEXT</td>
                <td>THIS IS A VERY VERY LONG LONG TEXT</td>
                <td>THIS IS A VERY VERY LONG LONG TEXT</td>
                <td>THIS IS A VERY VERY LONG LONG TEXT</td>
                </tr>
            </tbody>
            </table>
        </div>
    </body>
</html>

如何在空格上打断并且仅在单词对空间太大时才打断单词

2 个答案:

我已经修复了此检查在台式机或PC屏幕上的作用