CSS 기본 섹션 - 강제 줄 바꿈 word-break 및 word-wrap 사용

일반적인 상황에서 요소는 기본적인 화이트스페이스:normal(자동으로 줄을 바꾸지 않고 white-space:nowrap)을 가지고 있으며, 입력된 문자가 정의된 폭을 초과하면 자동으로 줄을 바꾸지만, 입력된 데이터는 빈칸이 없는 문자나 자모나 숫자(일반적인 데이터는 없겠지, 그러나 일부 테스트 인원들은 이렇게 할 것이다).용기의 폭을 초과할 때 용기를 크게 떠서 줄을 바꾸지 않는다.
따라서 해결 방법(IE, 크롬, FF를 테스트 브라우저로 함)에는 두 가지 쓰기 방법이 있습니다.

{

word-break:break-all; 

word-wrap:break-word;

}

두 가지 방법의 차이점은 다음과 같다.
1, word-break:break-all 예를 들어div 너비 400px의 내용은 400px로 자동으로 줄을 바꿉니다. 이 줄 끝에 영문 단어가 길면 (congratulation 등) 단어를 절단해서 이 줄 끝에 conra (congratulation의 앞부분), 다음 행동tulation (conguatulation) 의 뒷부분으로 바꿉니다.
2, word-wrap:break-word 예는 위와 같지만, 차이점은congratulation 전체 단어를 하나의 전체로 보는 것이다. 만약 이 줄의 끝 폭이 전체 단어를 표시하지 못한다면, 자동으로 전체 단어를 다음 줄에 놓고, 단어를 절단하지 않을 것이다.
html 코드:

    congratulation congratulation congratulation congratulation congratulation congratulation



    congratulation congratulation congratulation congratulation congratulation congratulation

결과는 다음과 같습니다.
이렇게 하면 일목요연하다.
만약 본문이 당신의 학습에 도움이 된다고 생각한다면 많은 지지와 격려를 바랍니다.