텍스트가 넘칠 때 간단한 텍스트 영역에 가로 막대가 표시되지 않습니다. 새 줄의 텍스트를 줄 바꿈합니다. 텍스트가 넘칠 때 자동 줄 바꿈을 제거하고 가로 막대를 표시하려면 어떻게합니까?
답변:
텍스트 영역은 기본적으로 줄 바꿈되지 않아야하지만 줄 바꿈을 명시 적으로 비활성화하도록 wrap = "soft"를 설정할 수 있습니다.
<textarea name="nowrap" cols="30" rows="3" wrap="soft"></textarea>편집 : "랩"특성은 공식적으로 지원되지 않습니다. IE 4.0 및 Netscape 2.0이 지원한다고 말하는 독일어 SELFHTML 페이지 (영어 소스는 여기에 있음 ) 에서 얻었 습니다. 또한 예상대로 작동하는 FF 3.0.7에서 테스트했습니다. 여기에서 상황이 바뀌었고, SELFHTML은 이제 위키이며 영어 소스 링크는 죽었습니다.
EDIT2 : 모든 브라우저가 지원하는지 확인하려면 CSS를 사용하여 랩 동작을 변경할 수 있습니다.
CSS (Cascading Style Sheets)를 사용하여와 동일한 효과를 얻을 수 있습니다
white-space: nowrap; overflow: auto;. 따라서 랩 속성은 오래된 것으로 간주 될 수 있습니다.
에서 여기 (텍스트 영역에 대한 정보 훌륭한 페이지 것 같다).
EDIT3 : 그것이 언제 바뀌 었는지 확실하지 않지만 (설명에 따르면 2014 년경에 있어야합니다), wrap이제 공식 HTML5 속성입니다 .w3schools 참조하십시오 . 이에 맞게 답변을 변경했습니다.
white-space: pre;(또는 pre-line/ pre-wrap) 동일으로 영향을했다 wrap="off"(반면에 나를 위해 white-space: nowrap을 존중하지 않았다 padding)
wrap="off"더 이상 유효하지 않지만 IE와 Edge 모두에 필요합니다!
textarea {
white-space: pre;
overflow-wrap: normal;
overflow-x: scroll;
}white-space: nowrap공백에 신경 쓰지 않아도 작동하지만 물론 코드 (또는 들여 쓰기 된 단락이나 의도적으로 여러 공백이있을 수있는 내용)로 작업하는 경우에는 원하지 않습니다 ... 그래서 선호합니다 pre.
overflow-wrap: normal(했다 word-wrap경우 어떤 부모가 해당 설정을 변경 필요 이전 버전의 브라우저에서); pre설정되어 있어도 랩핑이 발생할 수 있습니다 .
또한 현재 허용되는 답변과 달리 텍스트 영역 은 기본적으로 줄 바꿈됩니다. pre-wrap내 브라우저의 기본값 인 것 같습니다.
overflow-x: scroll하는 것이 좋습니다 overflow: auto. 스크롤 막대는 텍스트 영역에서 사용 가능한 입력 공간을 줄입니다. 또한 IE11은 필요에 따라 세로 스크롤 막대를 불필요하게 렌더링했지만 overflow: auto수정했습니다.
다음 CSS 기반 솔루션이 나를 위해 작동합니다.
<html>
<head>
<style type='text/css'>
textarea {
white-space: nowrap;
overflow: scroll;
overflow-y: hidden;
overflow-x: scroll;
overflow: -moz-scrollbars-horizontal;
}
</style>
</head>
<body>
<form>
<textarea>This is a long line of text for testing purposes...</textarea>
</form>
</body>
</html>이 모든 작업을 동시에 텍스트 영역으로 만드는 방법을 찾았습니다.
그것은 잘 작동합니다 :
어떻게하는지 설명하겠습니다 : Chrome 관리자 통합 도구를 사용하고 CSS 스타일에서 값을 보았습니다. 따라서 정상적인 값 대신 에이 값을 시도해보십시오. 그것을 원하는 사람을위한 것입니다.
CSS 섹션에서 Chrome, Firefox, Opera 및 Safari에 이것을 사용했습니다.
textarea {
white-space:nowrap;
overflow:scroll;
}CSS 섹션에서 IE에 이것을 사용했습니다.
textarea {
overflow:scroll;
}조금 까다로 웠지만 CSS가 있습니다.
다음과 같은 (x) HTML 태그 :
<textarea id="myTextarea" rows="10" cols="15"></textarea>그리고 <head>섹션 의 끝에 다음과 같은 JavaScript가 있습니다.
window.onload=function(){
document.getElementById("myTextarea").wrap='off';
}자바 스크립트는 w3C 유효성 검사기가 XHTML 1.1 Strict를 전달하도록하기위한 것입니다. wrap 속성은 공식이 아니기 때문에 (x) HTML 태그가 직접적 일 수는 없지만 대부분의 브라우저는이를 처리하므로 페이지를로드 한 후 해당 속성을 설정합니다.
이것이 더 많은 브라우저와 버전에서 테스트되어 누군가가 그것을 개선하고 모든 버전에서 완전히 크로스 브라우저로 만들 수 있기를 바랍니다.
이 질문은 textarea랩 을 비활성화하는 데 가장 많이 사용되는 질문 인 것 같습니다 . 그러나 2017 년 4 월 현재 IE 11 (11.0.9600)은 위의 솔루션으로 단어 줄 바꿈을 비활성화 하지 않습니다 .
에만 IE (11)에 대한 작업을 수행 솔루션입니다 wrap="off". wrap="soft"및 / 또는 white-space: preIE 11이 랩핑을 선택하지만 여전히 어딘가에 랩핑하는 alter 와 같은 다양한 CSS 속성 . 호환성보기를 사용하거나 사용하지 않고 이것을 테스트했습니다 . IE 11은 HTML 5와 호환되지만이 경우에는 호환되지 않습니다.
따라서 공백을 유지하고 오른쪽에서 벗어나는 선을 얻으려면 다음을 사용합니다.
<textarea style="white-space: pre; overflow: scroll;" wrap="off">아마도 Chrome 및 Firefox에서도 작동하는 것 같습니다. wrap="off"IE 11에 필요하다고 말하면서 HTML 5 이전 버전의 사용을 방어하지 않습니다 .
JavaScript를 사용할 수 있다면 오늘날 가장 휴대하기 쉬운 옵션이 될 수 있습니다 (Firefox 31, Chrome 36에서 테스트).
contenteditable="true"http://jsfiddle.net/cirosantilli/eaxgesoq/
<style>
div#editor {
white-space: pre;
word-wrap: normal;
overflow-x: scroll;
}
<style>
<div contenteditable="true"></div>휴대용 표준 CSS 솔루션이없는 것 같습니다.
또한 Javascript를 사용할 수있는 경우 ACE 편집기를 사용할 수도 있습니다.
http://jsfiddle.net/cirosantilli/bL9vr8o8/
<script src="http://cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
<div id="editor">content</div>
<script>
var editor = ace.edit('editor')
editor.renderer.setShowGutter(false)
</script>아마도 ACE가 지정되지 않았 textarea거나 일관성 이없는 것을 사용하지는 않지만 ACE 가 사용되는지 확실 하지 않기 때문에 ACE와 함께 작동 합니다 contenteditable.