html - 如果单词内容增加，如何到达p标签的下一行

如果单词内容超出屏幕，我希望段落元素的单词内容到达下一行。如何使用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;
}

最佳答案

您可以尝试像这样更改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;
    }