html - 将省略号添加到表 导致不出现的包含箭头

Question

在一个表格中，我在几列中有一个很长的标题文本，其中还包含一个添加了箭头图标:

.ascending a:after,
.ascending .glyphicon:before {
    content: "\e253";
}

this is an example

我想要实现的是在用 ellipsis 显示的列标题文本中, 3个逗号后的箭头会正确显示

页眉 |长文 长文... ^ | header

• 我不习惯使用 fixed因为它是响应表

• 查看 arrow在代码笔中 > 删除 ellipsis类来自

  <th class="**ellipsis** ascending glyphicon">

Answer 1

.table{width:700px;}
a:link{color: #337ab7;}

.ascending a:after,
.ascending .glyphicon:before {
	content: "\e253";
  position:absolute;
  right:1px;
}

.ellipsis{
    max-width:100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-striped table-bordered table-hover">
  <tbody>
      <tr>
        <th>header</th>
        <th class="ellipsis ascending glyphicon">
          <a href="#">long header long header long header long header long header long header long header long header long header long header 
          </a>
        </th>
        <th>header</th>
      </tr>
      <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
 </table>