如果文字内容超出屏幕,我希望段落元素的文字内容到达下一行。如何使用 css 样式实现此目的?
这是我尝试过的
template.html
<div class="rightDiv">
<input id="inputCustomer">
<p id="spandiv" [ngStyle]="{'position':'absolute','left':'60px'}" >{{customerName}}</p>
</div>
template.css
.rightDiv {
position: relative;
right: 320px;
height: 80px;
width: 160px;
}
#spandiv {
top: 40px;
background-color: #6B6664;
padding: 5px;
color:white;
font-weight: normal;
display: block;
opacity:0;
overflow: hidden;
width: auto;
word-wrap: break-word!important; // this is not working
}
#inputCustomer:hover + #spandiv {
display: block;
opacity:1;
}
最佳答案
您可以尝试像这样更改 th css #spandiv
中的空白:
#spandiv {
top: 40px;
background-color: #6B6664;
padding: 5px;
color:white;
font-weight: normal;
display: block;
opacity:0;
overflow: hidden;
width: auto;
word-wrap: break-all;
white-space: normal;
}
关于html - 如果单词内容增加,如何到达p标签的下一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59263944/