공백에 *관계없이* TEXTAREA 요소를 줄 바꿈하도록 하는 가장 우아한 방법
-
09-06-2019 - |
문제
Html Textarea 요소는 공백이나 탭 문자에 도달할 때만 래핑됩니다.사용자가 충분한 단어를 입력할 때까지는 괜찮습니다.줄 바꿈을 엄격하게 적용하는 방법을 찾고 있습니다(예:결과가 "loooooooooooo ooooooooooong"이더라도).
내가 찾은 가장 좋은 방법은 모든 문자 뒤에 너비가 0인 유니코드 공백을 추가하는 것이지만 이로 인해 복사 및 붙여넣기 작업이 중단됩니다.더 좋은 방법을 아는 사람이 있나요?
메모:여기서는 "textarea" 요소를 언급하고 있습니다(예:텍스트 입력과 유사하게 동작하는 것) - 단순한 텍스트 블록이 아닙니다.
해결책
CSS 설정 word-wrap:break-word
그리고 text-wrap:unrestricted
CSS 3 기능인 것 같습니다.현재 구현에서 이를 수행할 수 있는 방법을 찾는 행운을 빕니다.
다른 팁
- quirksmode.org에는 다양한 방법 개요.
- 관련 SO 질문이 있습니다. "HTML에서 대시에서 단어 분리를 수행하는 방법은 무엇입니까?"
- 이를 지원하는 브라우저에서는
word-wrap: break-word
원하는 효과를 줄 수도 있습니다.
텍스트 영역 너비 크기로 긴 단어 나누기:
1) 최신 브라우저의 경우:
textarea { word-break: break-all; }
2) IE8 호환성을 위해 다음을 추가합니다.
textarea { -ms-word-break: break-all; }
https://msdn.microsoft.com/en-us/library/ms531184%28v=vs.85%29.aspx
3) IE11 호환성 해킹을 추가합니다.
Internet Explorer 11 단어 줄 바꿈이 작동하지 않습니다.
@media all and (-ms-high-contrast:none) {
*::-ms-backdrop, textarea { white-space: pre; }
}
이 코드는 잘 작동합니다.
-IE 11, 크롬 51, 파이어폭스 46(윈도우 7);
-IE 8, 크롬 49, 파이어폭스 18(윈도우 XP);
-Edge 12.10240 , 오페라 30(윈도우 10);
적어도 지원되는 비표준 요소 wbr이 있습니다.
파이어폭스, http://developer.mozilla.org/En/HTML/Element
인터넷 익스플로러, http://msdn.microsoft.com/en-us/library/ms535917(VS.85).aspx
그리고 오페라.
나는 <wbr>, ​ 그리고 기법.세 가지 모두 IE 7, Firefox 3 및 Chrome에서 잘 작동했습니다.
복사/붙여넣기를 깨지지 않은 유일한 것은 <wbr> 꼬리표.
내 테스트에 따르면 Firefox만이 현재 브라우저에서 설명된 동작을 나타냅니다.따라서 가장 좋은 방법은 곧 출시될 Firefox 3.1이 문제를 해결하기를 기다리는 것입니다. :)
가장 우아한 방법은 다음과 같습니다. wrap="soft"
전체 단어를 래핑하거나 wrap="hard"
문자별로 포장하거나 wrap="off"
마지막 하나에도 전혀 포장하지 않았기 때문에 wrap="off"
브라우저가 마치 자동으로 사용하는 것처럼 자동으로 필요하지 않은 경우가 많습니다. wrap="off"
.
예:
<textarea name="tbox" cols="24" rows="4" wrap="soft"></textarea>