jquery - 如何强制中断超过父 div 宽度的单词

Question

我遇到了一个问题，我认为使用 css 是不可能的。我有一个文本输出动态显示在只有以下 html 的标签中

标签{
宽度:94px；
}

我正在尝试提出一个解决方案，该解决方案将动态获取超过 div 宽度的任何多个单词，并强制打破该单词。如果一个单词要被拆分，但可以在其自己的行中而不在文本中中断，则将其换行到下一行

下面的屏幕截图是一个正常工作的例子:

这是当前情况，其中单词中的字母被推到下一行:

这是我希望在这种情况下发生的事情:

任何帮助将不胜感激。我很好奇这是否可以通过 css 在没有大量 hack 和跨浏览器问题的情况下实现...

Answer 1

默认情况下，它应该换行(示例 1)

使用 word-break: keep-all;(示例 2)

但是当一个单词太长时你需要使用overflow-wrap: break-word;(例3)

p {
  width: 140px;
  border: 1px solid #000000;
}

p.test1 {
  word-break: keep-all;
}

p.test2 {
  overflow-wrap: break-word;
}

<p class="test">This paragraph contains some text. This line will-break-at-hyphens. verylongtextnonstoplolstillnotdonesorry</p>

<p class="test1">This paragraph contains some text. This line will-break-at-hyphens. verylongtextnonstoplolstillnotdonesorry</p>

<p class="test2">This paragraph contains some text. The lines will break at any character. verylongtextnonstoplolstillnotdonesorry</p>