FireFox 单词可以用 css 中断，但一次一个字母，而不是连字符所在的位置

Question

FireFox 分词正常 css，但一次一个字母，而不是连字符应该在的位置？？？

不是 FireFox：

火狐：

这是 CSS:

.superLongStuff {   
    /*
        SUPER LOOOOOOOOOOOONG WORD STUFF ...
    */
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap:     break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break:     break-all;
    /* Instead use this non-standard one: */
    word-break:     break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens:     auto;
    -moz-hyphens:    auto;
    -webkit-hyphens: auto;
    hyphens:         auto;  
}

Answer 1

Remove the word-wrap when you're using hyphens。因为，您使用了自动换行，它们只会将 word is breaking 换行到下一行。

我们使用连字符来演示或显示在下一行中继续的单词，但是 break-word 将单词分成两部分，它是 no longer a single segment 个单词，这就是为什么您看不到任何连字符的原因。

下面是两者的演示：

#a {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

#b {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

<article id="a" lang="en">
  <h1>Article A</h1>
  <p>As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.For example, if you are designing a brand new website for someone, most times you will have to make sure the prototype looks finished by inserting text or photos or what have you. The purpose of this is so the person viewing the prototype has a chance
    to actually feel and understand the idea behind what you have created.
  Now in some circumstances, designers may use squares and rectangles to help you visualize what should and could be in a specific location.We all have our own techniques, but one of the most effective techniques is to actually put some text where text goes and some pictures where pictures go to make sure everyone can see the vision you’ve created.
Coming up with filler text on the fly is not easy, but it is becoming more and more of a requirement. Fortunately, some designers and developers around the web know this and have put together a bunch of text generators to help you present your vision.Some are standard (like the always popular ‘Lorem Ipsum’ generators) and some are really fun. Either way, pick one of your favorites from below and start generating text and completing your vision.</p>
</article>
<br><br><hr><br>
<article id="b" lang="en">
<h1>Article B</h1>
  <p>As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.For example, if you are designing a brand new website for someone, most times you will have to make sure the prototype looks finished by inserting text or photos or what have you. The purpose of this is so the person viewing the prototype has a chance
    to actually feel and understand the idea behind what you have created.
  Now in some circumstances, designers may use squares and rectangles to help you visualize what should and could be in a specific location.We all have our own techniques, but one of the most effective techniques is to actually put some text where text goes and some pictures where pictures go to make sure everyone can see the vision you’ve created.
Coming up with filler text on the fly is not easy, but it is becoming more and more of a requirement. Fortunately, some designers and developers around the web know this and have put together a bunch of text generators to help you present your vision.Some are standard (like the always popular ‘Lorem Ipsum’ generators) and some are really fun. Either way, pick one of your favorites from below and start generating text and completing your vision.</p>
</article>

Answer 2

a) 当您想使用断字时不要使用 word-break。它总是会打破文字。

b) 为了安全起见，给容器添加一个语言属性（可以是html，body，也可以是容器div，比如<div class="a" lang="en"> - 见下文。

.a {
  width: 240px;
  border: 1px solid #eee;
}

.x {
 
  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  
}

<div class="a" lang="en">
  <p class="x">
    A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy,
    my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.
  </p>
</div>

Answer 3

当你想使用断字时不要使用断字。让浏览器在适当的地方自动插入连字符。

.superLongStuff {   
    -ms-hyphens:     auto;
    -moz-hyphens:    auto;
    -webkit-hyphens: auto;
    hyphens:         auto;  
}

FireFox 单词可以用 css 中断，但一次一个字母，而不是连字符所在的位置

FireFox word breaks OK with css, but one letter at a time, not where hyphens go

css

firefox

word-wrap

css-hyphens