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 = '&nbsp;';
      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

尝试使用此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 2

取消设置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 = '&nbsp;';
      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>

Answer 3

您可以将display课程的fa属性设置为inline（工作小提琴here）：

td .fa {
  display: inline !important;
}

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

3 个答案: