Question

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

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

this is an example

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

标题|长文长... ^ |头

我不会使用fixed作为响应表
用于查看代码笔中的arrow＆gt;从
中删除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>

将省略号添加到表中，不会出现包含箭头的原因

1 个答案: