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

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

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

只是取消设置td fa类的display属性。

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

Answer 3

你可以将fa类的display属性设置为inline （在这里工作）：

td .fa {
  display: inline !important;
}