Question

    <table>
<thead>
  <th>Item</th>
</thead>
<tbody>
  <tr>
    <td>
      <div style="display:inline-block;width:25%">
      <label style="display:block">abcdefghijklmnop</label>
      <input type="checkbox">
      </div>
      <div style="display:inline-block;width:25%">
      <label style="display:block">abcdefghijklmnop</label>
      <input type="checkbox">
      </div>
    </td>
  </tr>
</tbody>
</table>

如果标签文本溢出，我希望它自动跳转到下一行。我不希望隐藏标签或使用省略号。

注意：在我的情况下，我将循环div内容在同一行td。我想在全尺寸浏览器中将这个词分成下一行，或者将浏览器调整为较小的。

我该如何解决这个问题？

Answer 1

道歉发表评论的声誉太低。

但是你检查过Bootstrap表吗？它不仅解决了您的问题，而且是迈向简单Web开发的良好一步。

Bootstrap负责处理所有事情，并允许我们使用非常少的代码制作整洁干净的表格。

如果你需要进一步设置你的桌子样式，你可以在bootstrap样式表上添加样式。

查看以下简单教程，您也可以在线试用。

https://www.w3schools.com/bootstrap/bootstrap_tables.asp

要证明它是多么简单，

我已将代码粘贴到一个简单的HTML页面中。
添加了bootstrap。

瞧！您的问题在下面给出的示例中得到了解决。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
<table class="table">
    <thead>
      <th>Item</th>
    </thead>
    <tbody>
      <tr>
        <td>
          <div>
              <label>abcdefghijklmnop</label>
          </div>
          <div>
              <input type="checkbox">
          </div>
           <div>
              <label>abcdefghijklmnop</label>
           </div>
           <div>
              <input type="checkbox">
           </div>
        </td>
      </tr>
    </tbody>
</table>

<table class="table">
    <thead>
      <th>Item</th>
    </thead>
    <tbody>
      <tr>
        <td> <label>abcdefghijklmnop</label> </td>
        <td> <input type="checkbox"> </td>
      </tr>
      <tr>
        <td> <label>abcdefghijklmnop</label> </td>
        <td> <input type="checkbox"> </td>
      </tr>
    </tbody>
</table>

</body>
</html>

我仍然对你想要的东西感到困惑，所以我有两种方法。

Answer 2

试试Float：对;

<table>
<thead>
<th>Item</th>
</thead>
<tbody>
<tr>
<td>
  <div style="display:inline-block;width:25%">
  <label style="display:block">abcdefghijklmnop</label>
  <input type="checkbox">
  </div>
  <div style="display:inline-block;width:10%; float:right;">
  <label style="display:block">abcdefghijklmnop</label>
  <input type="checkbox">
  </div>
</td>
</tr>
</tbody>
</table>

Answer 3

您可以将word-wrap: break-word用于label标记。自动换行属性允许长字能够被打破并换行到下一行。 break-word允许破坏牢不可破的单词

<table>
  <thead>
    <tr>
      <th>Item</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div style="display:inline-block;width:25%">
          <label style="display:block;word-wrap: break-word;">abcdefghijklmnop</label>
          <input type="checkbox">
        </div>
        <div style="display:inline-block;width:10%">
          <label style="display:block;word-wrap: break-word;">abcdefghijklmnop</label>
          <input type="checkbox">
        </div>
      </td>
    </tr>
  </tbody>
</table>

MDN web docs word-wrap

如何防止div中的标签与表td上的另一个div内容重叠

3 个答案: