[html] 입력 유형 = “텍스트”요소 HTML / CSS 내부 텍스트 감싸기

Program / 글쓴이

아래에 표시된 HTML,

<input type="text"/>

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


다음 텍스트를 추가하면

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

아래 HTML을 사용하여

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

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


그러나 다음과 같이 브라우저에 표시되기를 바랍니다.


내 입력 요소의 텍스트를 래핑하고 싶습니다. 텍스트 영역없이이 작업을 수행 할 수 있습니까?

답변

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

따라서 textarea. 시각적 차이 외에도 JavaScript를 통해 동일한 방식으로 액세스됩니다 ( value속성 사용 ).

input이벤트 를 통해 그리고 단순히 replace(/\n/g, '').

답변

단어 나누기는 의도의 일부를 모방합니다.

    input[type=text] {
        word-wrap: break-word;
        word-break: break-all;
        height: 80px;
    }
<input type="text" value="The quick brown fox jumped over the lazy dog" />

스 니펫 확장

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

답변

입력을 사용할 수 없으며 대신 텍스트 영역을 사용해야합니다. 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>

스 니펫 확장

답변