问题标签 [word-break]

有 CSS 工具提示（codepen 在下面给出）。他们有min-width和max-width。它们有时包含简短的短语，有时包含非常长的单词，没有中断。如果存在white-space: nowrap=> 短工具提示完美呈现，但很明显，长工具提示没有包装并且不完全可见，则会发生这种情况：

这就是当我添加white-space: normal和word-break: break-word=> 时会发生的情况，现在短的和长的在到达之前很久就被包装了max-width：

我想要实现的是：工具提示在达到最大宽度之前不会换行。并且只有在它们没有进入最大宽度时才开始包装。像这儿：

是否可以仅使用 CSS（无 javascript）获得此行为？

这是代码笔：https ://codepen.io/anon/pen/bWXobM （取消注释第 58-59 行以更改行为。）

我没有通过任何找到的解决方案来实现这一目标。如果您知道如何在这种情况下应用它们，请分享！

更新：显然，wg 草案中刚刚添加了针对此问题的某种解决方案：https ://github.com/w3c/csswg-drafts/issues/1171 。如果有人现在找到解决方法仍然很有趣。

我无法解决移动浏览器中的雅虎电子邮件模板问题。默认情况下，雅虎使用值 break-word 定义样式“word-wrap”，当我尝试将其更改为“word-wrap: normal”时，浏览器会忽略它，我也尝试使用“word-break: keep-all”样式和雅虎解析器删除它，我也尝试用<nobr>标签包装单词，雅虎解析器也删除它们。电子邮件模板在除 yahoo 之外的所有移动客户端中看起来都不错。

这些似乎做同样的事情，有什么区别？ https://jsfiddle.net/pmuub8w1/2/

我正在编写一个应用程序，其中我将单个字符包装在跨度中以更好地处理点击事件。字符位于 div 中display: inline-block。如何让文本换行？我试过了：

也

无济于事。如您所见，它适用于普通文本，但不适用于包含在 span 中的文本。

JSBin： http: //jsbin.com/hugiqohawi/edit ?html,css,output

我有段落，每个字母都在其他元素中。例如：

我试图分开Someand text，但我看到了：

我怎样才能得到这样的东西

我如何在这一段中断词以及如何添加text-align: justify效果？感谢帮助。

我有一个简单的表格，在每一行中，我有多个跨度标签。每个跨度可以有不同长度的文本（我只是在这里展示结构）：

我几乎得到了我想要的结果，即如果文本很大，则将文本移动到新行。我唯一的问题是现在我得到了一些额外的空白（在灰色区域），如屏幕截图所示：

我希望它是这样的：

有什么办法可以摆脱多余的白色吗？提前致谢

我有一个用于文本段落的 div 元素。这旨在响应移动设备，因此我一直在使用不同的浏览器/视口大小对其进行测试。我有以下代码：

调整窗口大小时，它在 Chrome 上看起来很好， w 会换行然后中断。但是，在 Firefox 中，单词根本不会中断，并且 div 元素会扩展以包含所有文本，从而在页面底部创建一个滚动条。

我怎样才能得到它，以便单词在 Firefox 中中断？我试过添加white-space: pre-wrap;，但它所做的只是添加难看的换行符，甚至不强制断字。我不想使用word-break: break-all;，因为那会破坏每个单词，而我只想破坏溢出的单词。overflow-wrap: break-word;也显得无所作为。

编辑：我试图让它看起来像这样，这就是它在 Chrome 上的样子：Chrome Success

这就是 Firefox 上的样子（不是我想要的）：Firefox 错误

这就是它的样子break-all，这也不是我想要的。注意单词在可以移动到下一行时是如何被打断的：break-all

在 Firefox 中是否有替代方案？word-break: break-word

在火狐[版本 57.0]

在 Chrome [版本 62.0.3202.94]

有没有办法或替代方法break-word在 Firefox 中使用属性。？[如果它适用于旧版本，那就更好了。]

示例代码

我有这个代码：

这在大多数情况下都可以正常工作，因为默认情况下，如果文本长于一行，则在最近的空格处换行，并且单词永远不会分成半个单词。好的。

但是，在句子没有空格的唯一情况下（这不应该发生，但人是人），界面将中断，然后长单词将保留在一行上。

有没有办法优先考虑css，如果有空格，句子被剪切而不剪切单词（自动换行：break-word;）但是如果单词大于一行，则换行，剪切单词(word-break: break-all;) 避免视觉上的灾难。以该顺序。

到目前为止，如果我使用“word-wrap: break-word;”，一个长单词将保留在一行上，无论其长度如何，如果我使用“word-break: break-all;” 即使之前有可用的空格，这些单词也会被破坏。这些标准解决方案都没有帮助。

任何帮助，将不胜感激。

我想要一个 CSS 解决方案，最好是，但如果不可能，JS/jQuery 解决方案也可以。

PS：我需要 div 具有最大宽度的自动宽度，并且我需要跨度保持表格单元格。

是否可以在 CSS 中使用连字符或软连字符，从而不会不必要地呈现连字符？

我的目标是尽可能保留原始文本并打破任何单词，除非绝对关键，因为它们太长而无法适应容器宽度。

我的具体情况

我想以这样的方式呈现文本“Hi Superman”：

如果“超人”这个词太长而无法放入容器中，我想以某种方式将其连字符，例如：

但是如果“超人”这个词可以放入容器中，它必须在没有连字符的情况下呈现

如果上述情况是可能的（“超人”可以写成不带连字符的），那么添加不必要的连字符是不可接受的，如下所示：

我可以随意更改 HTML。我被允许以一种有意义的方式注入连字符（只要每个连字符之间有 3 个以上的字母就可以了。“Superma-n”永远不行）

我试过的

我认为软连字符将是解决方案。所以我用：Hi Super­man

但我发现这会导致上面显示的“不必要的连字符”这种不可接受的情况。

显示失败的片段：

我可以只用 CSS 解决上面的例子吗？（尝试了不同的word-break属性但没有成功）

我的猜测是，由于 CSS 的性质，仅使用简单的 HTML 和 CSS 是不可能解决这个问题的。我假设 CSS 只是逐行解析文本，它永远无法知道一个词是否会“更适合”下一行文本。如果它找到一个连字符，它将尝试在当前文本行上匹配最大数量的字符。

我想只用 HTML 和 CSS 来解决这个问题，或者根本不用。 编辑：最好 - 不使用 javascript 进行文本解析。

- 我不想根据 div 的宽度以及我是否猜测文本是否需要连字符来为每个 div 设置不同的 CSS 属性。

- 不希望在我的话周围添加包装

- 没有自动连字符会导致像“Superma-n”这样的可笑连字符（但是在紧要关头，只要每个连字符之间有 3 个字符，我就可以使用自动自动连字符。就像“超人”）