I'm facing an issue with displaying a very large text in a table. Despite trying various attributes such as -
{ text-overflow: clip; }
{ text-overflow: ellipsis; }
{ text-overflow: ellipsis-word; }
{ text-overflow: "---"; }
{ text-overflow: ellipsis ellipsis; text-align: center; }
and also using -
overflow-wrap: break-word;
However, when I use the slice function in my component.html, it prevents the tooltip from appearing which is crucial for me.
I need some suggestions on adjusting the CSS to address this problem.
Here is the image showing the overflow
component.css
#addbtn{
float:right;
}
thead>tr>th:hover {
cursor: pointer;
background-color: #384c57;
color: rgb(240, 202, 132);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0,
0.24);
}
th{
width:1px;white-space:nowrap;
}
table{
font-family: Arial, Helvetica, sans-serif;
}
thead{
background-color: #33444d;
color: white;
}
.card{
border: none !important;
}
#faIcon{
background: #2f4855;
color: white;
border: none;
}
input:hover {
background-color: rgb(247, 185, 114)
}
input:focus{
border : 2px solid rgb(247, 185, 114) !important;
}
.panel {
border: none;
margin-bottom: 0
}
.panel-transparent {
background: none;
}
td{
height:10px;
}
.zoom {
padding: 50px;
transition: transform .2s; /* Animation */
margin: 0 auto;
}
.zoom:hover {
transform: scale(3.0); /* (150% zoom - Note: if the zoom is too large,
it will go outside of the viewport) */
}
.table{
color:rgb(255, 255, 255); background-color:rgba(17, 26, 24, 0.452);
}
.panel-transparent .panel-heading{
background: rgba(44, 51, 59, 0.575)!important;
text-align: center;
color: #fff;
}
.my-pagination /deep/ .ngx-pagination .current {
background: #33444d;
}
#close{
color:#708e9e;
}
#close:hover{
color: white;
size: 25px;
}
#payloadData{
// border-image-slice: 10%;
width:15px;
// word-break: break-all;
// box-decoration-break: slice;
white-space: nowrap;
overflow-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis ellipsis; text-align: center;
direction:ltr;
word-break: break-all;
// text-overflow: ellipsis;
// text-overflow: ellipsis-word;
}
component.html
<td title="{{dat.PAYLOAD}}" id="payloadData">
{{dat.PAYLOAD}}</td>