HTML에서 단어 줄 바꿈을 해제하는 방법은 무엇입니까?

517

나는 이것을 알아낼 수 없다는 것에 대해 어리석은 생각을하지만 어떻게 워드 랩을 끄는가? css word-wrap속성은을 사용하여 강제 설정할 수 break-word있지만 강제로 해제 할 수 없습니다 ( normal값 과 함께 단독으로 남겨 둘 수 있음 ).

어떻게 포장 단어를 강요하는 걸까 오프 ?

html css word-wrap

— 알렉산더 버드
소스

852

CSS white-space속성 을 사용해야 합니다.

특히, white-space: nowrap그리고 white-space: pre가장 일반적으로 사용되는 값입니다. 첫 번째는 당신이 따르는 것 같습니다.

— 존
소스

25

위에서 누락 된 웹킷 특정 값 추가

white-space: -moz-pre-wrap; /* Firefox */
white-space: -o-pre-wrap; /* Opera */
white-space: pre-wrap; /* Chrome */
word-wrap: break-word; /* IE */

— 마타스 바이 케 비치 우스
소스

3

"nowrap"또는 "pre"를 사용하여 "공백"을 솔루션으로 찾는 이유가 무엇인지 궁금합니다. 올바른 동작을 수행하지 않습니다. 텍스트를 한 줄로 작성하십시오! 텍스트는 줄 바꿈이되어야하지만 기본 단어는 끊지 않아야합니다. 이는 워드 랩, 오버 플로우 랩, 워드 브레이크 및 하이픈과 같은 CSS 속성으로 인해 발생합니다. 따라서 다음 중 하나를 수행 할 수 있습니다.

word-break: break-all;
word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

따라서 해결책은 그것들을 제거하거나 "unset"또는 "normal"로 재정의합니다.

word-break: unset;
word-wrap: unset;
overflow-wrap: unset;
-webkit-hyphens: unset;
-moz-hyphens: unset;
-ms-hyphens: unset;
hyphens: unset;

업데이트 : 나는 JSfiddle에도 증거를 제공합니다 : https://jsfiddle.net/azozp8rr/

— 조드
소스

1

나는 당신이 일반적으로 단어를 깰 이유를 이해합니다. 그러나 자동 줄 바꿈을 전환 해야하는 정당한 이유가 없다고 가정하는 것은 나에게 의미가 없습니다. "설정되지 않은"솔루션을 신속하게 테스트 해 보았지만 여전히 줄 바꿈이있었습니다. 작동한다고 생각되면 작동하는 jsfiddle 데모를 제공하십시오.

— Alexander Bird

회신이 사라진 이유를 모르겠습니다. 다시 말하지만, 강제로 줄 바꿈을 할 수 있습니다. 일반적으로 사람들은 버튼을 사용합니다. 그러나 텍스트가 컨테이너 외부로 나올 수 있기 때문에 반응 형 이유로 나쁜 디자인이라고 생각합니다. 어쨌든, 문제는 word-wrap : break-word에 대해 묻는 것이 었습니다. 그래서 코드를 제공했습니다. whitespace : nowrap은 또 다른 것으로, 단어를 분리하지 않고 전체 줄을 제거합니다. 또한 JSfiddle과 코드의 비교를 제공합니다 : https://jsfiddle.net/azozp8rr/

— zod

2

이것은 Chrome 텍스트 영역에서 바보 같은 작업 중단이 발생하는 것을 막기 위해 일했습니다.

word-break: keep-all;

— 라이언 참리
소스