html - 当溢出浏览器屏幕时，如何使长文本到达下一行

我对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/