टेक्स्ट-ओवरफ़्लो: इलिप्सिस फ़ॉन्ट-कमाल आइकन हटाता है

Question

मेरे पास उनकी कोशिकाओं में फ़ॉन्ट-कमाल आइकन के साथ एक साधारण तालिका है। मैंने सादा जावास्क्रिप्ट का उपयोग कर टेबल कॉलम को आकार देने योग्य बना दिया। यदि बहकर कोशिकाओं सामग्री छिपा हुआ है और एक दीर्घवृत्त ("...") दिखाया गया है:

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

 
\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

आप inline करने के लिए fa वर्ग के display गुण सेट कर सकते हैं:

td .fa { 
    display: inline !important; 
} 

Answer 2

कोशिश इस सीएसएस के साथ, टेबल या कुछ अधिकतम चौड़ाई को चौड़ाई 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

बस को सेट किए बिना

td अंदर fa वर्ग के display संपत्ति।

.fa { 
    display: inline-block; 
} 

.fa { 
    display: unset; 
} 

तरह

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

नीचे एक काम कर उदाहरण है है। (कार्य बेला here)

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