如何强制超过父div

Question

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

label { width:94px; }

我正在尝试提出一个解决方案，它将动态地接受超过div宽度的任何多个单词，并强行打破该单词。如果一个单词要被拆分但是可以放在自己的行上而不会在文本中打破，那么将它包装到下一行

此工作正常的示例将是以下屏幕截图：

这是当前场景，其中单词内的字母被推送到下一行：

这是我想在这种情况下发生的事情：

任何帮助将不胜感激。我很好奇，如果没有很多黑客和跨浏览器问题，这甚至可以实现......

Answer 1

默认情况下，它应该换行（示例1）

使用word-break: keep-all;（示例2）

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

＆＃13;

＆＃13;

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我猜word-wrap:break-word;会做的工作

Answer 3

尝试下面的css，您的换行符现在取决于width的{​​{1}}

＆＃13;

＆＃13;

span

＆＃13;

span{
  width:20%;
  display:flex;
  background-color:yellow;
}

div{
  width:100%;
  border:1px solid red;
}

＆＃13;

＆＃13;

＆＃13;

Answer 4

你可以尝试 自动换行：break-word; 或 word-break：break-all;