공백에 *관계없이* TEXTAREA 요소를 줄 바꿈하도록 하는 가장 우아한 방법

StackOverflow https://stackoverflow.com/questions/47817

  •  09-06-2019
  •  | 
  •  

문제

Html Textarea 요소는 공백이나 탭 문자에 도달할 때만 래핑됩니다.사용자가 충분한 단어를 입력할 때까지는 괜찮습니다.줄 바꿈을 엄격하게 적용하는 방법을 찾고 있습니다(예:결과가 "loooooooooooo ooooooooooong"이더라도).

alt text

내가 찾은 가장 좋은 방법은 모든 문자 뒤에 너비가 0인 유니코드 공백을 추가하는 것이지만 이로 인해 복사 및 붙여넣기 작업이 중단됩니다.더 좋은 방법을 아는 사람이 있나요?

메모:여기서는 "textarea" 요소를 언급하고 있습니다(예:텍스트 입력과 유사하게 동작하는 것) - 단순한 텍스트 블록이 아닙니다.

도움이 되었습니까?

해결책

CSS 설정 word-wrap:break-word 그리고 text-wrap:unrestricted CSS 3 기능인 것 같습니다.현재 구현에서 이를 수행할 수 있는 방법을 찾는 행운을 빕니다.

다른 팁

텍스트 영역 너비 크기로 긴 단어 나누기:

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>, &#8203; 그리고 ­ 기법.세 가지 모두 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>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top