如何在响应宽度表格列中截断文本？

debugcn 发表于 Dev

詹姆士

我有一张有4列的桌子。第二列显示一个电子邮件地址，我希望该列在表中占用的最大宽度。然后，当视口大小变小时，列宽应该是可响应的，并且如果显示的电子邮件对于列而言太大，则电子邮件应被截断。

到目前为止，我发现的所有解决方案都可以使用table: {table-layout:fixed;}或max-width在上设置一个值td。这对我不利，因为它们将列强制为特定宽度。

这是我要实现的有关列宽布局的内容，但截断失败。我在SO评论（显示max-width解决方案）上读到了该设置width: 100%，该设置min-width: 1px会产生所需的效果，但似乎无法正常工作。

http://plnkr.co/edit/gIC5u6wq6oCYhF5pCJJp?p=预览

这是一个max-width示例，其中至少文本被截断了，但是列宽是错误的。

http://plnkr.co/edit/e8sj2iqRUpBytMomddCS?p=preview

我还尝试过将电子邮件文本包装在中div，将的宽度设置td为100％，然后在内部设置截断div（也使用width: inherit），但这也不起作用。

领域

将一个类添加到其他列（即Checkbox，Staff和Client列），并通过提供适当的宽度来固定其宽度。

以下是HTML和CSS代码：

的HTML

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="[email protected]" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link data-require="[email protected]" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="table-responsive">
        <table class="table table-bordered table-hover">
          <thead>
            <tr>
              <th></th>
              <th>Email</th>
              <th class="text-center">Staff</th>
              <th class="text-center">Client</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="text-center other-col">
                <input type="checkbox">
              </td>
              <td class="email-col">
                [email protected]
              </td>
              <td class="text-center other-col">
                yes
              </td>
              <td class="text-center other-col">
                no
              </td>
            </tr>
            <tr>
              <td class="text-center other-col">
                <input type="checkbox">
              </td>
              <td class="email-col">
                [email protected]
              </td>
              <td class="text-center other-col">
                yes
              </td>
              <td class="text-center other-col">
                no
              </td>
            </tr>
            <tr>
              <td class="text-center other-col">
                <input type="checkbox">
              </td>
              <td class="email-col">
                [email protected]
              </td>
              <td class="text-center other-col">
                yes
              </td>
              <td class="text-center other-col">
                no
              </td>
            </tr>
            <tr>
              <td class="text-center other-col">
                <input type="checkbox">
              </td>
              <td class="email-col">
                [email protected]
              </td>
              <td class="text-center other-col">
                yes
              </td>
              <td class="text-center other-col">
                no
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>

</html>

您可以发现other-col上面的代码中添加了一个附加类。

的CSS

/* Styles go here */
.email-col {
    /*width: 100%;
    min-width: 1px;*/
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.other-col {
  width:10%;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。