文本溢出:省略号移除字体令人敬畏的图标

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

您可以将fa类的fa属性设置为inline (工作小提琴这里)：

td .fa {
  display: inline !important;
}

Answer 2

尝试用这个css，给宽度100%表或一些最大宽度。

 td, th {
    white-space: -o-pre-wrap; 
    word-wrap: break-word;
    white-space: pre-wrap; 
    white-space: -moz-pre-wrap; 
    white-space: -pre-wrap; 
}

Answer 3

只需在display中取消fa类的td属性。

.fa {
   display: inline-block;
}

为了拥有

.fa {
  display: unset;
}

喜欢

/* Remove default inline-block of font awesome .fa class */
td i {
  display: unset !important;
}

下面是一个有用的例子。

​

(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;
}


/* Remove default inline-block of font awesome .fa class */

td i {
  display: unset !important;
}

<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>

​