development

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

big-blog 2020. 2. 13. 00:46
반응형

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


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

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


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

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


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

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

"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/


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

word-break: keep-all;

참고 URL : https://stackoverflow.com/questions/4652654/how-to-turn-off-word-wrapping-in-html



반응형