无法解析angular4和html中的文本溢出问题 [英] Unable to resolve overflow of text in angular4 and html

问题描述

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

  {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中提出一些更改。

溢出图片

component.css

  #addbtn {
 float：right; 
} 
 thead> tr> th：hover {
 cursor：pointer; 
背景颜色：＃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; 
} 
 
表{
 font-family：Arial，Helvetica，sans-serif; 
} 
 
 thead {
 background-color：＃33444d; 
颜色：白色; 
} 
 
 
 .card {
 border：none！important; 
} 
 
 
 #faIcon {
背景：＃2f4855; 
颜色：白色; 
 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; 
 
转换：转换.2s; / *动画* / 
 
保证金：0自动; 
} 
 
 .zoom：hover {
 transform：scale（3.0）; / *（150％缩放 - 注意：如果缩放比例太大，
将会超出视口）* / 
} 
 
 
 .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; 
颜色：#fff; 
 
} 
 
 .my-pagination / deep / .ngx-pagination .current {
 background：＃33444d; 
 
} 
 
 #close {
颜色：＃708e9e; 
} 
 
 #close：hover {
颜色：白色; 
 size：25px; 
} 
 
 #payloadData {
 // border-image-slice：10％; 
 width：15px; 
 //分词：break-all; 
 
 // box-decoration-break：slice; 
 white-space：nowrap; 
 overflow-wrap：break-word; 
 overflow：hidden; 
文本溢出：省略号省略号; text-align：center; 
方向：ltr; 
 word-break：全部破解; 
 //文本溢出：省略号; 
 //文本溢出：省略号字; 
} 
  

component.html

 < td title ={{dat.PAYLOAD}}id =payloadData> 
 {{dat.PAYLOAD}}< / td> 
  

解决方案 wrap：break-word; 使用 word-break：break-word;
并提供max-height到外部div并保留溢出-γ：自动。这可能会帮助你

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>

解决方案

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

这篇关于无法解析angular4和html中的文本溢出问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！