问题标签 [word-break]

我有以下用于分词的 CSS 用于 html 电子邮件：

在 Microsoft Outlook 中，如果表格单元格中的普通单词碰到单元格的边缘，而不是将整个单词换行到新行，则会将其拆分为新行。上面的 CSS 适用于长超链接，但可以放在新行上的普通单词也会被拆分。

例如

如何确保只包装长单词，但可以放入新行的单词移动到新行，而不是像上面最后一个示例中那样被拆分？

虽然 CSS 必须word-break更好地控制长词的显示，但是否可以通过保留连字符而不被强行分成 2 行来做相反的事情？

CodePen Demo以更好地说明场景。

word-wrap: break-word当相应的规则在 Chrome 中有效时，为什么CSS 规则不会在 Firefox 中缩小元素？

这里的.form-field容器被限制为 300px 的宽度，legend它的内部有 100% 的宽度。里面的长字拉伸legend到溢出 300px 宽度。

当我break-word使用（非标准）WebKitword-break定义将 CSS 规则应用于 Chrome 时，长字被破坏并且legend元素缩小到预期的 300 像素宽度。

在 Firefox 中，相应的word-wrap规则不会破坏文本并缩小元素，除非我专门将 的宽度设置legend为 300px。为什么我必须这样做？为什么 Firefox 不能legend正确计算“100% of 300px”并调整大小？

如果您在 Firefox 上查看此代码段，您会看到legend仍然溢出其容器的 300 像素宽度。

（在 macOS Chrome 64 和 Firefox 57 中测试）。

有没有人可以帮助我了解这篇文章：首先我想知道为什么 max-width 在下面的代码中不起作用，其次我需要工具提示中的内容一直持续到 max-width 然后转到下一行多谢

理想情况下，我希望每个msg人的最大宽度为30vw，但同时尊重父母的宽度。第一行行为正确，但第二行没有。如果 parent 的宽度调整为小于 30vw 的某个值，则第二个msg 将溢出。

我想要类似的东西max-width = min(30vw, parent's width)

注意：容器的宽度可以动态调整大小。我在示例中放置了 width = 300px 以演示容器无法容纳第二个 msg 的情况，该 msg 以某种方式具有 width = 它的 max-width = 30vw。

您还可以在 http://jsfiddle.net/vbj10x4k/231/上查看示例

我试图防止在新 AMP 布局中的帖子中出现单词中断。我用首页上的摘录解决了这个问题：

但是，我似乎无法在实际帖子中做同样的事情。

这就是我正在看的：

我尝试将自动换行更改为正常和/或将自动换行从自动换行更改为正常，但没有任何效果。

partyfavorz.com

我有很多我不想自动换行的标签，但我确实想让标签列表换行。例如：

我不想要的是：

即在标签内中断。

我想要的是这样的：

我已经搞砸了

对父母和孩子，没有任何成功。要么整个​​字段结束为一行 - 根本没有中断，要么我在标签内得到中断。

目前我有这个：

最后，我想我发现了一个以前没有人问过的问题。我有一个有两列的表。第一列有时可能有一个非常非常长的词。第二列总是有很多简短的单词，它们包装得很好。如果我将 word-break:break-all 应用于第一列，然后缩小我的浏览器窗口，当我希望在进行丑陋的 break-all 换行之前将所有短词包装在第二列中时，这些列将保持 50/50第一列。

我需要在所有列中包装所有可能的可换行词，然后再诉诸丑陋的破坏，但仍将其作为防止溢出的最后手段。哪些列最终更宽并不重要。

我正在为我的段落设置样式，并且在一定数量的字符后有换行符。我希望能够使休息后的线左对齐而不是居中对齐。

我有一个较小的侧容器，#sideNavContainer在父 div 中，另一侧（右侧）是内容的另一个 div。

当我将文本放入#sideNavContainer包含很长没有空格的单词时，这些单词开始脱离容器并覆盖右侧（内容区域）的内容。

我试图强制 的内容#sideNavContainer分解这些单词，以便它们在下一行继续，当它们到达容器的右端但我不是 100% 满意，因为我期望单词/句子也应该是最好在空间上打破。长词应该从下一行开始，然后被分解，而不是与其他文本在同一行开始（在空格之后），然后继续（但被分解）。

这是一些示例，希望能说明我的意思：

CSS：

小提琴：https ://jsfiddle.net/qp74uxkt/11/

我的愿望/期望是文本会在“我是一个很长的文本”之后中断，然后在下一行继续“andIevenContain ...”，然后这个长词可以在可用空间的末尾被打破，基于父容器的限制。当我使用“连字符：auto;”时，这也不起作用。这甚至可以做到吗？