text-overflow: ellipsis usuwa ikony niesamowite czcionki

Question

Mam prosty stolik z ikonami niesamowitymi czcionkami w ich komórkach. Zmieniono rozmiar kolumn tabeli za pomocą zwykłego javascript. Zawartość komórki jest ukryta jeśli przelewa i wielokropek („...”) upomniany:

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

Problem: podczas zmiany rozmiaru kolumn tak, że zawartość jest ukryty, a następnie co czyni go jeszcze raz większe, wszystkie ikony, ale pierwsze zniknęły.

oczekiwane zachowanie: Ikony powinny pojawić się podczas dokonywania kolumnę większe ponownie.

Proszę uruchomić poniższy fragment, aby zobaczyć go w akcji. Każda pomoc bardzo ceniona! Dzięki.

(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

Można ustawić właściwość fa klasy display do inline (fidel pracy here):

td .fa { 
    display: inline !important; 
} 

Answer 2

próby z tym css dają szerokość 100% na stole lub na Max szerokości.

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

Wystarczy rozbrojony własnością klasy wewnątrz tdfadisplay.

.fa { 
    display: inline-block; 
} 

mieć

.fa { 
    display: unset; 
} 

jak

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

Poniżej jest przykład roboczych.

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