입력 유형 = "텍스트"요소 HTML / CSS 내부 텍스트 기

입력 유형 = "텍스트"요소 HTML / CSS 내부 텍스트 기

---

아래에 HTML,

<input type="text"/>

다음과 같이 브라우저에 표시됩니다.

---

다음 텍스트를 추가하면

빠른 갈색 여우가 게으른 개를 뛰어 넘었습니다.

아래 HTML을 사용하여

<input type="text" value="The quick brown fox jumped over the lazy dog."/>

다음과 같이 브라우저에 표시됩니다.

---

그러나 다음과 같이 브라우저에 표시 되기를 원합니다. 입력 요소의 텍스트를 래핑하고 싶습니다. 텍스트 영역 없이이 작업을 수행 할 수 있습니까?

---

---

그것은 여러 줄 textarea텍스트 입력에 대한 작업입니다. 는 input 그것을하지 않을 것입니다 ; 그렇게 설계되지 않았습니다.

따라서 textarea. 동일한 방식으로 액세스됩니다 ( value속성 사용 ).

input이벤트 를 통해 포함 replace(/\n/g, '').

---

의도의 일부를 모방합니다.

input.break {
    word-wrap: break-word;
    word-break: break-all;
    height: 80px;
}

해결 방법 으로이 솔루션은 일부 브라우저에서 효율성을 잃었습니다. 데모를 확인하십시오 : http://cssdesk.com/dbCSQ

---

을 사용할 입력 입력 수 없으며 대신 텍스트-domain을 사용해야합니다. wrap="soft"코드와 함께 텍스트 영역을 사용하고 다음과 같은 나머지 속성은 선택 사항입니다.

<textarea name="text" rows="14" cols="10" wrap="soft"> </textarea>

속성 : 예를 들어 "40"문자로 텍스트의 양을 제한하려는 다음maxlength="40" 과 같은 속성을 추가 할 수 있습니다 <textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40"></textarea>. 스크롤을 숨기려면 해당 스타일을 숨 깁니다. 만 사용하는 경우 overflow:scroll;나 overflow:hidden;또는 overflow:auto;그것은 하나의 두 개의 스크롤 막대에 대한 영향이 소요됩니다. 각 스크롤 막대에 대해 다른 속성을 원하는 경우 overflow:scroll; overflow-x:auto; overflow-y:hidden;스타일 영역에서 다음 과 같은 속성을 사용합니다 . 텍스트 영역의 크기를 사용할 수 있으며 다음과 resize:none;같이 사용할 수 있습니다 .

<textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40" style="overflow:hidden; resize:none;></textarea>

이렇게하면 입력 텍스트 상자와 똑같이 작동하지만 입력 텍스트를 사용하지 않고 행을 사용하는 "40"문자의 최대 문자 길이와 단어 줄 바꿈이있는 14 개 행과 10 개 열이있는 텍스트 영역을 만들 수 있습니다.

참고 : 텍스트 영역은 행과 전혀 작동 하지 않도록<input type="text" name="tbox" size="10"></input> 생성 된 입력과 달리 행에서 작동합니다.

---

내부 값이 단일 행 다중이지만 사용자에게 단어 줄 바꿈 형식으로 표시되는 텍스트 입력을 생성하거나 다른 요소 에 contenteditable 속성을 사용할 수 있습니다 <div>.

const el = document.querySelector('div[contenteditable]');

// Get value from element on input events
el.addEventListener('input', () => console.log(el.textContent));

// Set some value
el.textContent = 'Lorem ipsum curae magna venenatis mattis, purus luctus cubilia quisque in et, leo enim aliquam consequat.'

div[contenteditable] {
  border: 1px solid black;
  width: 200px;
}

<div contenteditable></div>

참고 URL : https://stackoverflow.com/questions/5286663/wrapping-text-inside-input-type-text-element-html-css