无法解决 angular4 和 html 中的文本溢出问题答案

【问题标题】：Unable to resolve overflow of text in angular4 and html无法解决 angular4 和 html 中的文本溢出问题
【发布时间】：2018-10-15 01:25:41
【问题描述】：

我有一个非常大的文本，我正在使用表格来显示文本。但是，文本溢出。我已经使用了 text-overflow 中的所有属性-

{ text-overflow: clip; }

{ text-overflow: ellipsis; }

{ text-overflow: ellipsis-word; }

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

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

还是这样-

overflow-wrap: break-word;

当我在 component.html 中使用 slice 时，工具提示不会出现。所以我没有使用它，因为工具提示很重要。

请建议对 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>

【问题讨论】：

text-overflow: ellipsis 应该和overflow: hidden 一起使用，你这样做了吗？
我在您的问题中没有看到任何图片
vikram 现在你可以看到....谢谢
@Jeremy Thille ...是的，我正在使用它。请检查#payload数据
试试这个：#payloadData{width:15px;文本对齐：居中；}

标签： html css angular

【解决方案1】：

不要使用overflow-wrap: break-word;，而是使用word-break: break-word; 并为外部 div 提供最大高度并保留overflow-y:auto。这可能对你有帮助

【讨论】：