长词出现在新行上，而不是使用断词来断词答案

【问题标题】：Long words appear on new line rather using break-word to break the word长词出现在新行上，而不是使用断词来断词
【发布时间】：2016-06-21 21:27:37
【问题描述】：

在撰写文章时，我有时需要使用不带空格的长字符串，而不是使用分词和换行，而是将这些词放在自己的行中。这在前面的句子中留下了很大的空白。

您可以在“CryptoRoger 如何加密受害者的文件”部分中查看此示例：

http://www.bleepingcomputer.com/news/security/new-ransomware-called-cryptoroger-that-appends-crptrgr-to-encrypted-files/

我还在这个小提琴中添加了一个例子：

https://jsfiddle.net/s5u53vmq/

我的 CSS 当前设置为以下内容，以便单词不会溢出 div，我希望打破：

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

还有什么我应该使用的，以便这些长词中断而不是移动到下一行？

【问题讨论】：

它正在工作，只是不是以一种明显的方式。将 uTox address 扩展 10 个字符，您会看到它工作正常。浏览器是否会将其移至新行以在单词中断之前尽可能多地容纳单词，这一点并不明显。但确实有些道理。
谢谢。出于文体原因，很想找到一种方法来删除那个大的空白。在一个完美的世界中，长词会在 uTox 地址之后开始，然后中断，以便更好地流动。
我添加了一个显示问题的小提琴。 jsfiddle.net/s5u53vmq
更新了我的答案。

标签： html css

【解决方案1】：

除非你愿意使用额外的标记，否则我认为你可能会听从浏览器的意愿以及它们如何处理长的、连续的文本。

此解决方案还需要额外的标记，但在单词会中断的地方更加动态。虽然<wbr> 和<shy> 之类的解决方案有效，但它们要求您指定确切的位置来破坏单词。在某些情况下，这是所需要的。我的解决方案需要一个单独的标签包裹你想要打破的单词，并会动态地打破它。

.inline-word-wrap {
  word-break: break-all;
}

<p>
  When the ransomware is done encrypting your files it will open the ransom 
  note called&nbsp;<strong>!Where_are_my_files!.html</strong>&nbsp;as shown 
  above. This ransom note will contain instructions stating developer at 
  the uTox address <span class="inline-word-wrap">F12CCE864152DA1421CE717710EC61A8BE2EC74A712051447BAD56D1A473194BE7FF86942D3E.</span>
</p>

您更新的JSFiddle。

【讨论】：

谢谢。希望有一种方法可以用 CSS 100% 动态地做到这一点，但这个解决方案至少让我可以包装一个长单词并让浏览器决定它如何包装。感谢您的建议。
是的，如果是纯 CSS 解决方案，那就太好了。如果有的话我没见过。不知道它是否正在下线。我假设当前的实现是试图让 run-on 首先不中断，这就是为什么它下降到下一行然后在需要时中断的原因。我认为他们正在使用[space][word][space] 的视觉模式。也许对这种行为的方式和原因有更深入了解的人可以给我们留言。

【解决方案2】：

您可以使用以下方法在长字符串中为浏览器标记断点：

&shy; 用破折号打断
&#x200b; 打破隐形

【讨论】：

感谢您提供的信息，因为我不知道这个标签。这行得通，但寻找可以使用 CSS 自动化的东西，而不是我必须实现这些标签。

【解决方案3】：

<shy> 标签（“软连字符”）允许您标记单词中允许换行（包括连字符）的位置。这样，单词就不会在接近行尾的任何位置中断，而只会在您允许的位置。

一个抽象的例子：abcdef<shy>ghijkl<shy>mnopq<shy>rstuvwxyz 将被写成abcdefghijklmnopqrstuvwxyz 如果它适合一行 o 在最接近行尾的<shy> 标记处被断开（带有连字符）。

【讨论】：

感谢您提供的信息，因为我不知道这个标签。这行得通，但寻找可以使用 CSS 自动化的东西，而不是我必须实现这些标签。

【解决方案4】：

<wbr> 标签在 HTML5 中引入，AFAIK 随处支持，表示允许中断字符链的位置。它应该可以解决您的问题。

【讨论】：

感谢您提供的信息，因为我不知道这个标签。这行得通，但寻找可以使用 CSS 自动化的东西，而不是我必须实现这些标签。

【解决方案5】：

使用 CSS -

.articleBody p{
  /* 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;
}

另一种解决方案。用省略号防止溢出 -

.articleBody p{
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
}

【讨论】：