입력 유형 = "텍스트"요소 HTML / CSS 내부 텍스트 기
아래에 HTML,
<input type="text"/>
다음과 같이 브라우저에 표시됩니다.
다음 텍스트를 추가하면
빠른 갈색 여우가 게으른 개를 뛰어 넘었습니다.
아래 HTML을 사용하여
<input type="text" value="The quick brown fox jumped over the lazy dog."/>
다음과 같이 브라우저에 표시됩니다.
그러나 다음과 같이 브라우저에 표시 되기를 원합니다. 입력 요소의 텍스트를 래핑하고 싶습니다. 텍스트 영역 없이이 작업을 수행 할 수 있습니까?
![위의 HTML을 브라우저에 표시하는 방법입니다.](https://i.stack.imgur.com/vv9Uy.png)
그것은 여러 줄 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
'ProgramingTip' 카테고리의 다른 글
C ++에서 배열 타임에 프로그래밍 방식으로 정적 배열 만들기 (0) | 2020.11.21 |
---|---|
콘솔 (Ctrl-C)에서 종료 될 때 PyQt 애플리케이션을 종료하는 올바른 방법은 무엇입니까? (0) | 2020.11.21 |
요소가 화면에 표시 확인 (0) | 2020.11.20 |
Postgres에서 CSV 파일의 값으로 선택한 행을 업데이트하는 방법은 무엇입니까? (0) | 2020.11.20 |
어떤 Ruby on Rails가 어떤 Ruby 버전과 호환 되나요? (0) | 2020.11.20 |