css连字符在chrome中只使用两个单词时无法正常工作

vaqhlq81  于 2023-05-30  发布在  其他
关注(0)|答案(2)|浏览(131)
.container {
      width: 250px;
      background-color: red;
    }

.hyphenate {
              width: 230px;
              font-size: 40px;
              margin-bottom: 0.6em;
              text-align: left;
              -ms-hyphens: auto;
              -moz-hyphens: auto;
              -webkit-hyphens: auto;
              hyphens: auto;
      }
<div class="container">
  <h1 class="hyphenate">this    
  internationalization </h1>
</div>

我目前正在一个网页上工作,我有这个标签中,我想应用断字,我使用了多种组合的属性在CSS

.hyphenate {
          font-size: 40px;
          margin-bottom: 0.6em;
          text-align: left;
          hyphens: auto;
          -ms-hyphens: auto;
          -webkit-hyphens: auto;
          -moz-hyphens: auto;
        }

这个组合在桌面和移动的版本的Firefox和Safari中都可以完美地工作,但我不能让它在Chrome中工作,我也尝试了其他组合word-breakword-wrapoverflow-wrap,但问题仍然存在。我也读到过这是一个chrome bug,但根据https://caniuse.com/?search=hyphens的最后一条信息,它声明对auto值有部分支持。
下面是我使用的示例:this is the text breaking properly on Safari and firefox
this what I get when I open the page on chrome (both desktop and mobile)只有当标题包含至少3个单词时,连字在chrome中才能正常工作。and this what I get when I only use two words in chrome, it causes an overflow and does not break, but it breaks correctly in firefox and safari我在mac上使用chrome,版本为87.0.4280.88,这是目前最新的android chrome版本87.0.4280.101,我将感谢任何帮助。

gzszwxb4

gzszwxb41#

这看起来像crbug.com/1022415,这在Chrome 89中得到了修复。当我在本地测试中尝试时,它正如预期的那样工作。对于您的代码片段,您需要添加lang="en"属性。

.container {
      width: 250px;
      background-color: red;
    }

.hyphenate {
              width: 230px;
              font-size: 40px;
              margin-bottom: 0.6em;
              text-align: left;
              -ms-hyphens: auto;
              -moz-hyphens: auto;
              -webkit-hyphens: auto;
              hyphens: auto;
      }
<div class="container" lang="en">
  <h1 class="hyphenate">this    
  internationalization </h1>
</div>
wbgh16ku

wbgh16ku2#

Chrome(没有测试其他)只显示连字符与hyphens: auto;word-break: break-word;
如果你有word-break: break-all;,自动断字不起作用。
不幸的是,hyphensMDN页面并没有提到这个警告。

相关问题