我不熟悉 css 样式和属性。我希望文本出现在下一行而不是流到浏览器屏幕之外。
我已经展示了我需要的和当前正在发生的事情。
图 #1 显示了当前正在发生的情况,但我希望发生图 #2 中显示的情况。
我试过自动换行 :break-all;溢出包装:中断词!重要;但没有任何效果。 注意:我设置了 margin 0 auto;
template.html
<div class="rightDiv">
<div class="customerText" align="center">
<b>
Customer Number (Customer Name)
</b>
</div>
<div class="content">
<p id="spandiv">10122019 (tjwmxuwmiihcxdfryfgfhrunlfsxrkhvmyqjjuwjddknjaybnrobpzferxaenxzenbckmlqqzesvfbnnsxwydfbzgbaxkccvoplgjxbikxjifojjmvqxmbjbrtmvbngq)</p>
</div>
template.css
.rightDiv {
position: relative;
right: 350px;
height: 80px;
width: 250px;
}
.content{
width:50%;
position:relative;
margin:auto;
padding:0px;
text-align:center;
top:10px;
}
#spandiv {
display: inline-block;
font-size:11px;
background-color: #232F34;
color:#FFFFFF;
opacity:1;
top:5px;
overflow-wrap: break-word !important;
}
最佳答案
要使 overflow-wrap: break-word
正常工作,display
应设置为 block
并且不透明度不得为 0。将其设置为非常小的值,例如 0.001
p#spandiv {
display: block;
opacity: 0.001;
overflow-wrap: break-word
}
这是一支笔来证明这一点:CSS force word break
关于html - 当长文本溢出浏览器屏幕时如何将其移至下一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59523647/