html - 无法解决 angular4 和 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进行一些更改。
组件.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;
}
组件.html
<td title="{{dat.PAYLOAD}}" id="payloadData">
{{dat.PAYLOAD}}</td>
解决方案
而不是使用overflow-wrap: break-word;
useword-break: break-word;
并提供 max-height 到外部 div 和 keep overflow-y:auto
。这可能会帮助你
推荐阅读
- c# - HttpClient SendAsync 可以不阻塞 GUI 线程吗?
- wxpython - 如何在图像上绘制矩形框;wxPython?
- matlab - 线性索引的下标
- javascript - 编辑脚本以应用于所有工作表
- linux - 如何在没有 root 的情况下更新 libstdc++(未找到版本“GLIBCXX_3.4.20”)?
- java - 单击直到框架关闭时如何禁用按钮?
- c - OpenSSL“错误:'ctx'的存储大小未知”
- python - 当我给出 Gz 文件类型的 Zip 文件时,如何从图像数据集中导入数据。我已经提取了吗?
- git - doxygen 相对图像路径和源目录结构
- javascript - Vue(哈希)路由器,当部分哈希更改时更新以及浏览器后退按钮(更好的方法)