tràn văn bản: dấu ba chấm xóa các biểu tượng phông chữ tuyệt vời

Question

Tôi có một bảng đơn giản với các biểu tượng phông chữ tuyệt vời trong các ô của chúng. Tôi đã làm cho các cột trong bảng có thể thay đổi kích thước bằng cách sử dụng javascript đơn giản. Nội dung các tế bào bị ẩn nếu tràn và dấu ba chấm ("...") được hiển thị:

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

Vấn đề: Khi thay đổi kích thước các cột sao cho nội dung bị ẩn và sau đó làm cho nó lớn hơn nữa, tất cả các biểu tượng nhưng biểu tượng đầu tiên đã biến mất.

Hành vi mong đợi: Các biểu tượng sẽ xuất hiện trở lại khi làm cho cột lớn hơn một lần nữa.

Vui lòng chạy đoạn mã bên dưới để xem nó hoạt động. Bất kỳ trợ giúp nào được đánh giá cao! Cảm ơn.

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

 
\t // 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

Bạn có thể đặt display tài sản của fa lớp để inline (làm việc fiddle here):

td .fa { 
    display: inline !important; 
} 

Answer 2

Cố gắng với css này, cung cấp cho chiều rộng 100% để bàn hoặc một số chiều rộng tối đa.

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

Chỉ unset các display tài sản của lớp fa bên trong td.

.fa { 
    display: inline-block; 
} 

có

.fa { 
    display: unset; 
} 

như

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

Dưới đây là một ví dụ làm việc.

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