Fatal编程技术网

Twitter bootstrap 3 如何在响应宽度表列中实现截断文本？

twitter-bootstrap-3

Twitter bootstrap 3 如何在响应宽度表列中实现截断文本？,twitter-bootstrap-3,Twitter Bootstrap 3,我有一个4列的表。第二列显示电子邮件地址，我希望该列在表中占据最大宽度。然后，当视口大小变小时，列宽应该是响应性的，如果显示的电子邮件对于列来说太大，则应该截断 到目前为止，我找到的所有解决方案要么使用table:{table layout:fixed；}要么在td上设置max width值。这对我来说没有好处，因为它们会将柱强制设置为特定的宽度 这就是我试图实现的列宽布局，但是截断失败了。我读到一条SO注释（显示max width解决方案），设置width:100%和min width:1px

我有一个4列的表。第二列显示电子邮件地址，我希望该列在表中占据最大宽度。然后，当视口大小变小时，列宽应该是响应性的，如果显示的电子邮件对于列来说太大，则应该截断

到目前为止，我找到的所有解决方案要么使用
table:{table layout:fixed；}
要么在
td
上设置
max width
值。这对我来说没有好处，因为它们会将柱强制设置为特定的宽度

这就是我试图实现的列宽布局，但是截断失败了。我读到一条SO注释（显示
max width
解决方案），设置
width:100%
和
min width:1px
将产生预期效果，但似乎不起作用

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

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

为该单元格添加样式

word-break: break-all;
将类添加到其他列，即复选框、人员和客户列，并通过提供适当的宽度来固定其宽度

下面是
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="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>
你能用叉子和编辑工具来显示这个效果吗？其他哪些值应应用于单元格？ 
/* 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%;
}