javascript - HTML - 将字符串转换为多行

Question

我有一个大问题想要解决。

问题

• 在元素宽度上显示的一行字符串

代码示例

.box {
  width:150px; 
  border: 2px solid black;
}

<div class="box">
  <p>THIS IS A LONG STRING<br>
  BUT_THIS_WOULD_BE_THE_PRBLEM_WHEN_A_STRING_HAVE_NO_SPACES!!!!!!!!!!!!!!!!!!!!!!!!!!!!</p>  
</div>

也许有人知道如何显示这样的文本。(仅在 JS、JQuery、CSS 中)

想要的结果

.box {
  width: 150px;
  border: 2px solid black;
}

<div class="box">
  <p>THIS IS A LONG STRING<br>AND_THIS_IS_THE-<br>CONVERTED_STR-<br>ING
</div>

Answer 1

也许你应该使用 word-wrap

Allow long words to be able to break and wrap onto the next line:

.box {
  width:150px; 
  border: 2px solid black;
  word-wrap: break-word;
}

<div class="box">
  <p>THIS IS A LONG STRING<br>
  BUT_THIS_WOULD_BE_THE_PRBLEM_WHEN_A_STRING_HAVE_NO_SPACES!!!!!!!!!!!!!!!!!!!!!!!!!!!!</p>  
</div>