Unable to resolve overflow of text in angular4 and html

Question

I have a very large text and I am using a table to display the text. However, the text overflows. I have used all the attributes in text-overflow be it -

{ text-overflow: clip; }

{ text-overflow: ellipsis; }

{ text-overflow: ellipsis-word; }

{ text-overflow: "---"; }

{ text-overflow: ellipsis ellipsis; text-align: center; }

or be it -

overflow-wrap: break-word;

And when I use slice in my component.html, the tooltip doesn't appear. So I am not using it as the tooltip is important.

Please suggest a few changes in the css.

Overflown image

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>

Answer 1

Instead of using overflow-wrap: break-word; use word-break: break-word; and provide max-height to outer div and keep overflow-y:auto . this may help you