如何将 break-all 限制为只有长单词？

Question

我试图在基于 bootstrap 的模板中的所有 col 中打破非常长的单词（还有一些长 uuid），但是当我对所有列使用以下样式时，它会破坏所有内容（检查例子中的坏坏）甚至这些地方都是正常的包装在单词上工作得很好（检查例子中的预期破损）。

有没有一种方法可以让我尽可能使用正常中断，只有在它无法做到这一点时才恢复到 break-all？ Javascript 如果对性能影响不大，也欢迎使用技巧。

我希望正常中断对 space 操作的普通文本有效，并且 break-all 在文本没有任何 space 且溢出时有效。我想知道这是否可能！

div {
  white-space: -moz-pre-wrap;
  /* Mozilla */
  white-space: -hp-pre-wrap;
  /* HP printers */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: pre-wrap;
  /* CSS 2.1 */
  white-space: pre-line;
  /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word;
  /* IE */
  word-break: break-all;
}
.fifty {
  width: 200px;
  float: left;
  border: 10px solid #e6e6e6;
  margin: 1px;
  font-size: 14px;
  font-family: Verdana;
}
h6 {
  clear: both;
  margin:0;
}

<div class="fifty">aquickwhitefoxjumpsoverafrozendog</div>
<div class="fifty">A Quick White Fox Jumps Over A Frozen Dog</div>

<h6>Bad breaking at all places</h6>
<div class="fifty">Whosebug is a privately held website, the flagship site of the StackExchangeNetwork, created in 2008 by Jeff-Atwood and Joel-Spolsky</div>

<h6>Expected breaking</h6>
<article class="fifty">Whosebug is a privately held website, the flagship site of the StackExchangeNetwork, created in 2008 by Jeff-Atwood and Joel-Spolsky</article>

Answer 1

div {

  / These are technically the same, but use both /
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  / This is the dangerous one in WebKit, as it breaks things wherever /
  word-break: break-all;
  / Instead use this non-standard one: /
  word-break: break-word;

  / Adds a hyphen where the word breaks, if supported (No Blink) /
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}
.fifty {
  width: 200px;
  float: left;
  border: 10px solid #e6e6e6;
  margin: 1px;
  font-size: 14px;
  font-family: Verdana;
}
h6 {
  clear: both;
  margin:0;
}

<div class="fifty">aquickwhitefoxjumpsoverafrozendog</div>
<div class="fifty">A Quick White Fox Jumps Over A Frozen Dog</div>

<h6>Bad breaking at all places</h6>
<div class="fifty">Whosebug is a privately held website, the flagship site of the StackExchangeNetwork, created in 2008 by Jeff-Atwood and Joel-Spolsky</div>

<h6>Expected breaking</h6>
<article class="fifty">Whosebug is a privately held website, the flagship site of the StackExchangeNetwork, created in 2008 by Jeff-Atwood and Joel-Spolsky</article>

如何将 break-all 限制为只有长单词？

How to limit break-all to only long words?

javascript

css

word-wrap