html - 当长文本溢出浏览器屏幕时如何将其移至下一行

Question

我不熟悉 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;

}

Answer 1

要使 overflow-wrap: break-word 正常工作，display 应设置为 block 并且不透明度不得为 0。将其设置为非常小的值，例如 0.001

p#spandiv {
    display: block;
    opacity: 0.001;
    overflow-wrap: break-word
}

这是一支笔来证明这一点:CSS force word break