谁能告诉我一些使用css或jquery破坏单词的解决方案，如下所示。

样品 1

需要将其分解为

样品 2

需要将其分解为

样品 3

需要将其分解为

我试过了，word-break: break-all;但它不工作

在 Google Chrome 和 Mozilla Firefox 中，breaks/wraps 的行为似乎有所不同。

谷歌浏览器：

火狐浏览器：

两者都有完全相同的 CSS：

但我不能让它保持一致。我想将长词移到下一行，如果它们仍然不合适，则在任何地方打破它们（就像谷歌浏览器在我的图片中所做的那样）。

我怎样才能让 Mozilla Firefox 也这样做？什么是正确的方法，为什么？

我正在尝试将“p”标签中的任何 SVG 符号处理为一个单词，然后将其后跟一个像点或问号这样的标点符号。

这意味着当该行用点断开整个符号时，将转到下一行，而不仅仅是它后面的点。

我试图用 CSS 来实现这一点，但没有运气。

这是一个代码笔示例...

http://codepen.io/sheko_elanteko/full/RomyWa/

你会注意到最后一个词“文本”。后面跟一个点正常中断，但它之前的 svg 符号没有。

我正在使用“word-break: break-all”在任何字符之间插入中断。
但是，在 Chrome 中，它不能与下面的特定字符（例如冒号、分号、逗号）一起使用。
（我的代码笔在这里：https ://codepen.io/yukito/pen/wobZJq ）

源代码：

在 FireFox 和 Safari 中，它按预期工作。

我的问题：
。这是一个错误吗？还是规格？
. 如何在 Chrome 中的连续分号之间换行？

谢谢你。

更新：

考虑到像这支笔这样的单词边界，“break-word”会换行：https
://codepen.io/yukito/pen/xRNopJ 我真的很想在任何字符之间插入中断而不考虑单词边界。

我已经 table-layout: fixed;在一张桌子上设置了一个，但每个单元格中的单词都被分成了一个新行。

我确实 按照这里的建议white-space: nowrap;尝试了添加无济于事的解决方案

问题： 如何防止固定布局表格单元格中的断字？

表布局：

CSS：

假设用户填写了他的个人资料“关于”部分，并且其中有一个很长的“aaaaaaaaaaaaaaaa......”单词，它破坏了站点标记。现在，这个词需要被打破。

一般来说，有两种方法可以做到这一点。我可以编写一个 Rails 助手来完成这项工作，它会产生类似（HAML here）的结果

在我看来，或者我可以使用 css 并说：

然而问题是这两个选项都要求我在我的视图中经过很多地方（我输出用户在字段中输入的内容一次），我需要插入适当的类名或对break_long_words助手的调用！我不记得所有这些地方。

不幸的是，我也不能使用body { word-break: break-all }，因为它的行为非常奇怪，在奇怪的地方打破了相当短的单词。

理想情况下，我只想列出模型中从视图调用时需要分词的所有字段。一个人将如何完成这项任务？

word-break:break-word 不支持 edge，ie 和 firefox。如果空间存在，我需要css来打破这个空间，但如果空间不存在，直接打破这个词（检查chrome或safari中的小提琴）。由于 MS edge 、IE 和 Firefox 不支持断词，我不得不使用 break-all 但即使句子中存在空格，它也会破坏中间的单词。

有没有我可以在这里使用的css

这是文本在不同浏览器上尝试的小提琴，你会得到我遇到的问题

https://jsfiddle.net/emx9bL3y/7/

谢谢

Breaking words using CSS中的解决方案 指出标签应具有固定宽度，但在这种情况下，标签的宽度会有所不同，它可以是屏幕宽度的 200 像素。因此，如果屏幕尺寸更大，则标签的宽度会更大，反之亦然。

我有一个包含“-”的单词（预平衡），我不会将其分成两行。

在谷歌 chrome 中这个词分为两行：

我希望它是：

或者：

对于其他没有“-”的单词可以正常工作。我只有 chrome 浏览器才有这个问题。在我测试过的所有其他浏览器中似乎工作正常。

谁能帮我解决这个问题？

该word-break: break-all;样式不适用于带有“$”符号的文本。

HTML

CSS

这是一个链接：https ://jsfiddle.net/kxakpku0/

我有五个带有一些文本的容器：

我的想法是，浮动文本直到它到达我的max-width: 350px. 当它到达它时，它应该打破的话。我想，我的第一个仅包含两个单词的文本会更短，因为它直到 350px 才浮动并且不需要中断单词，而我的最后一个容器的文本长度应该达到最大宽度的 350px 然后打破的话。我遇到的问题是，现在每个容器都有相同的宽度。怎么了？我也尝试使用min-width: 100px;，但没有帮助。有任何想法吗？