使用连字符和弹性框的 Microsoft Edge 错误

Posted 2023-03-06

【中文标题】使用连字符和弹性框的 Microsoft Edge 错误

【英文标题】：Microsoft Edge bug using hyphenation and flexbox

【发布时间】：2017-10-03 23:37:56

【问题描述】：

这段代码显示了两个 div 容器。在 ID 为 a 的 div 上设置了 display: flex;。在两者上，我们都使用-ms-hyphens: auto; 激活了连字符。 但在 IE 或 Edge 中，连字符仅适用于没有附加 flexbox 的 div。正如预期的那样，它在 Chrome 和 Firefox 中运行良好。

div 
  max-width: 100px;
  background: red;
  -ms-hyphens: auto;
  hyphens: auto;
  margin-bottom: 10px;

#a 
  display: flex;

<article>
  <div id="a" lang="en">
    Incomprehensibilities 
  </div>

  <div id="b" lang="en">
    Incomprehensibilities 
  </div>
</article>

https://codepen.io/anon/pen/jmGxJZ

有人有解决办法吗？

【问题讨论】：

您的 Codepen 示例都不能在我的 Chrome 58-64bit/Windows 10 ... 或 Firefox 上运行

我猜你的系统是用英文配置的。我的是德语的。所以我用英文单词更新了笔以进行连字符。它现在应该可以工作了。

仍然没有断线

不管怎样，今天使用 CSS 连字符看起来是一条崎岖不平的道路……而且 Flexbox 不是 真正的 块元素，您可能需要重新考虑。这篇文章有一些好处：css-tricks.com/almanac/properties/h/hyphenate

根据caniuse.com/#feat=css-hyphens 无论如何都不能在 Chrome Windows 上运行。但在 FF Windows 上它对我有用。在 Mac 上，它适用于 Chrome 和 FF。此外，我添加了 lang 标签以使其在 FF 上工作。但它仍然在 Internet Explorer 上中断。

【参考方案1】：

我终于找到了答案。

根据https://css-tricks.com/almanac/properties/h/hyphenate/

连字符属性控制块级文本的断字 元素。

他们明确地说block level elements。所以我决定不使用 flexbox，因为这不是真正的块级元素，谢谢@LGSon。

为了让文本居中和连字符，我使用https://css-tricks.com/centering-css-complete-guide/ 中的方法将块级元素垂直居中。 此外，根据http://caniuse.com/#feat=css-hyphens Windows 上的 Chrome 无论如何都不支持断字。所以我使用word-break: break-all; 仅用于Chrome 使用来自这里https://***.com/a/13587388/4558231 的媒体查询黑客。 最后，它适用于 MAC OSX 上的 Chrome、FF 和 Safari。 也适用于 Windows 上的 Edge 和 IE11。

你可以在https://codepen.io/bierik/pen/mmBjqQ看到我的结果

【讨论】：

您应该使用段落(

@RobParsons - 将测试词放在