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

Question

如果单词内容超过屏幕，我希望段落元素的单词内容到达下一行。 如何使用 css 样式实现这一点？

这是我尝试过的

模板.html

  <div class="rightDiv">
   <input id="inputCustomer">
   <p id="spandiv" [ngStyle]="{'position':'absolute','left':'60px'}" >{{customerName}}</p>
  </div>

模板.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;
}  

Answer 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;
    }

Answer 2

使用break-all而不是break-word 。 如果你想破词

#spandiv {
    word-break: break-all;
}

Answer 3

您可以在<p>标签中添加以下 css

overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;

演示在这里https://css-tricks.com/almanac/properties/o/overflow-wrap/