文本溢出:省略号删除字体真棒图标

Question

我有一个简单的表格,其单元格中有很棒的图标.我使用普通的javascript使表格列可调整大小.如果溢出则隐藏单元格内容并显示省略号("..."):

td, th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

问题: 当调整列的大小以便隐藏内容然后再将其放大时,除了第一个之外的所有图标都消失了.

预期行为: 再次使列更大时,应重新显示图标.

请运行下面的代码段以查看它的实际效果.任何帮助高度赞赏!谢谢.

(function makeTableHeaderResizable() {
  // clear resizers
  Array.prototype.forEach.call(
    document.querySelectorAll('.table-resize-handle'),
    function(elem) {
      elem.parentNode.removeChild(elem);
    }
  );

	// create resizers
  var thElm;
  var startOffset;
  Array.prototype.forEach.call(
    document.querySelectorAll('table th'),
    function(th) {
      th.style.position = 'relative';

      var grip = document.createElement('div');
      grip.innerHTML = ' ';
      grip.style.top = 0;
      grip.style.right = 0;
      grip.style.bottom = 0;
      grip.style.width = '5px';
      grip.style.position = 'absolute';
      grip.style.cursor = 'col-resize';
      grip.className = 'table-resize-handle';
      grip.addEventListener('mousedown', function(e) {
        thElm = th;
        startOffset = th.offsetWidth - e.pageX;
      });

      th.appendChild(grip);
    }
  );

  document.addEventListener('mousemove', function(e) {
    if (thElm) {
      thElm.style.width = startOffset + e.pageX + 'px';
    }
  });

  document.addEventListener('mouseup', function() {
    thElm = undefined;
  });
})();

/* text-overflow: ellipsis is likely causing the issue here */
td, th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
table {
  table-layout: fixed;
  border-top: 1px solid black;
  width: 100%;
}

/* styling */
th {
  border-right: 1px dotted red;
}
th {
  height: 50px;
}
td {
  border: 1px solid black;
}
tr {
  border-left: 1px solid black;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<h5>Drag the right border of the th elements and make the cells smaller. All fa-icons but the first have disappeared when you make the cells wider again.</h5>
<table>
  <thead>
    <tr>
      <th>Column</th>
      <th>Column</th>
      <th>Column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        text works normally
      </td>
      <td>
        <i class="fa fa-cog"></i>
        <i class="fa fa-edit"></i>
        <i class="fa fa-trash"></i>
        <i class="fa fa-check"></i>
      </td>
      <td>
        <i class="fa fa-cog"></i>
        <i class="fa fa-edit"></i>
        <i class="fa fa-trash"></i>
        <i class="fa fa-check"></i>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

您可以将类display的属性设置fa为inline（此处工作小提琴）：

td .fa {
  display: inline !important;
}