파이어 폭스 단어는 CSS로 OK이지만 한 번에 한 글자 씩 올리며 하이픈은 사용하지 않습니다

Question

파이어 폭스 단어는 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

#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>

가) 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 2

Remove the word-wrap when you're using hyphens :

다음은 CSS입니다. 이후로 랩핑을 사용하면 word is breaking이 다음 행으로 넘어갑니다.

하이픈을 사용하여 어떤 단어가 다음 줄에 계속 나타나는지 보여 주지만 break-word로 단어를 두 개로 나누고 단어가 no longer a single segment이므로 하이픈이 보이지 않습니다. 당신이 하이픈을 사용하고자 할 때

Answer 3

하이픈을 사용하려면 단어 분리를 사용하지 말고 브라우저에 자동으로 하이픈을 삽입하십시오.

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