当溢出浏览器屏幕时如何使长文本进入下一行

Question

我对CSS样式和属性不熟悉。我希望文本显示在下一行，而不是在浏览器屏幕外显示。

我已经显示了我的需要和当前发生的事情。

图片＃1显示了当前正在发生的事情，但我想发生图片＃2中显示的事情。

我尝试自动换行：break-all;溢出包装：断字！重要；但没有任何效果。注意：我已将保证金设置为0自动；

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:0;
  top:5px;
  overflow-wrap: break-word !important;

}

Answer 1

.rightDiv {
 position: relative;
 height: 80px;
 width: 60%;
}

.content{
  width:100%;
  position:relative;
  margin:auto;
  padding:0px;
  top:10px;

}
#spandiv {
  display: inline-block;
  font-size:11px;
  background-color: #232F34;
  color:#FFFFFF;
  opacity:1;
  top:5px;
  overflow-wrap: break-word !important;
  word-wrap: break-word;
  width: 100%;
}

<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> 

Answer 2

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

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

这里有一支钢笔展示了这一点：CSS force word break