如何在响应宽度表列中实现截断文本?

时间:2014-07-25 14:08:19

标签: twitter-bootstrap-3

我有一个包含4列的表格。第二列显示一个电子邮件地址,我希望该列能够占用表中的最大宽度。然后,当视口大小变小时,列宽应该是响应的,并且如果它对于列太大而显示的电子邮件应该截断。

到目前为止我找到的所有解决方案都使用table: {table-layout:fixed;}或在max-width设置td值。这对我来说没什么用,因为它们会将列强制为特定的宽度。

这是我尝试实现的列宽布局,但截断失败。我读了一条SO评论(显示max-width解决方案),设置width: 100%min-width: 1px会产生预期效果,但它似乎无效。

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

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

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

我还尝试在div中包装电子邮件文本,将td的宽度设置为100%,然后在内部div上设置截断(也是与width: inherit),但也没有。

2 个答案:

答案 0 :(得分:0)

为该单元格添加样式

word-break: break-all;

答案 1 :(得分:0)

将类添加到其他列,即Checkbox,Staff和Client列,并通过给出适当的宽度来修复它们的宽度。

以下是HTMLCSS代码:

<强> 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="bootstrap@3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link data-require="bootstrap-css@3.1.1" 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">
                example@example.com
              </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">
                example@example.com
              </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">
                example@example.com
              </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">
                example@example.com
              </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%;
}