텍스트 영역에서 줄 바꿈을 어떻게 제거합니까?

IT story

텍스트 영역에서 줄 바꿈을 어떻게 제거합니까?

hot-time 2020. 6. 25. 07:52

텍스트 영역에서 줄 바꿈을 어떻게 제거합니까?

텍스트가 넘칠 때 간단한 텍스트 영역에 가로 막대가 표시되지 않습니다. 새 줄의 텍스트를 줄 바꿈합니다. 텍스트가 넘칠 때 자동 줄 바꿈을 제거하고 가로 막대를 표시하려면 어떻게합니까?

텍스트 영역은 기본적으로 줄 바꿈되지 않아야하지만 줄 바꿈을 명시 적으로 비활성화하도록 wrap = "soft"를 설정할 수 있습니다.

<textarea name="nowrap" cols="30" rows="3" wrap="soft"></textarea>

편집 : "랩"특성은 공식적으로 지원되지 않습니다. 나는에서 그것을 가지고 독일 SELFHTML 페이지 (영어 원본은 여기에 IE 4.0 및 Netscape 2.0 지원에게 그것을 말한다). 또한 예상대로 작동하는 FF 3.0.7에서 테스트했습니다. 여기에서 상황이 바뀌었고, SELFHTML은 이제 위키이며 영어 소스 링크는 죽었습니다.

EDIT2 : 모든 브라우저에서 지원하는지 확인하려면 CSS를 사용하여 랩 동작을 변경할 수 있습니다.

CSS (Cascading Style Sheets)를 사용하여와 동일한 효과를 얻을 수 있습니다 white-space: nowrap; overflow: auto;. 따라서 랩 속성은 오래된 것으로 간주 될 수 있습니다.

에서 여기 (텍스트 영역에 대한 정보 훌륭한 페이지 것 같다).

EDIT3 : 그것이 언제 바뀌 었는지 확실하지 않지만 (의견에 따르면 2014 년경에 있어야합니다), wrap이제 공식 HTML5 속성입니다 ( w3schools 참조) . 이에 맞게 답변을 변경했습니다.

textarea {
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: scroll;
}

white-space: nowrap공백에 신경 쓰지 않아도 작동하지만 물론 코드 (또는 들여 쓰기 된 단락이나 의도적으로 여러 공백이있을 수있는 내용)로 작업하는 경우에는 원하지 않습니다 ... 그래서 선호합니다 pre.

overflow-wrap: normal(했다 word-wrap경우 어떤 부모가 해당 설정을 변경 필요 이전 버전의 브라우저에서); pre설정되어 있어도 랩핑이 발생할 수 있습니다 .

또한 현재 허용되는 답변과 달리 텍스트 영역 은 기본적으로 줄 바꿈됩니다. pre-wrap내 브라우저의 기본값 인 것 같습니다.

다음 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>

이 모든 작업을 동시에 텍스트 영역으로 만드는 방법을 찾았습니다.

가로 스크롤바
여러 줄 문자 지원
줄 바꿈되지 않은 텍스트

그것은 잘 작동합니다 :

크롬 15.0.874.120
Firefox 7.0.1
오페라 11.52 (1100)
사파리 5.1 (7534.50)
IE 8.0.6001.18702

Let me explain how i get to that: I was using Chrome inspector integrated tool and I saw values on CSS styles, so I try these values, instead of normal ones... trial & errors till I got it reduced to minimum and here it is for anyone that wants it.

In the CSS section I used just this for Chrome, Firefox, Opera and Safari:

textarea {
  white-space:nowrap;
  overflow:scroll;
}

In the CSS section I used just this for IE:

textarea {
  overflow:scroll;
}

It was a bit tricky, but there is the CSS.

An (x)HTML tag like this:

<textarea id="myTextarea" rows="10" cols="15"></textarea>

And at the end of the <head> section a JavaScript like this:

 window.onload=function(){
   document.getElementById("myTextarea").wrap='off';
 }

The JavaScript is for making the W3C validator passing XHTML 1.1 Strict, since the wrap attribute is not official and thus cannot be an (x)HTML tag directly, but most browsers handle it, so after loading the page it sets that attribute.

Hope this can be tested on more browsers and versions and help someone to improve it and makes it fully cross-browser for all versions.

If you can use JavaScript, the following might be the most portable option today (tested Firefox 31, Chrome 36):

a div with contenteditable="true"
the styles suggested by Partly
JavaScript form submission on button click: How to submit a form using javascript?

http://jsfiddle.net/cirosantilli/eaxgesoq/

<style>
  div#editor {
    white-space: pre;
    word-wrap: normal;
    overflow-x: scroll;
  }
<style>
<div contenteditable="true"></div>

There seems to be no standard, portable CSS solution:

wrap attribute is not standard
white-space: pre; does not work for Firefox 31 for textarea. Fiddle, open feature request.

Also, if you can use Javascript, you might as well use the ACE editor:

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>

Probably works with ACE because it does not use a textarea either which is underspecified / incoherently implemented, but not sure if it is uses contenteditable.

This question seems to be the most popular one for disabling textarea wrap. However, as of April 2017 I find that IE 11 (11.0.9600) will not disable word wrap with any of the above solutions.

The only solution which does work for IE 11 is wrap="off". wrap="soft" and/or the various CSS attributes like white-space: pre alter where IE 11 chooses to wrap but it still wraps somewhere. Note that I have tested this with or without Compatibility View. IE 11 is pretty HTML 5 compatible, but not in this case.

Thus, to achieve lines which retain their whitespace and go off the right-hand side I am using:

<textarea style="white-space: pre; overflow: scroll;" wrap="off">

Fortuitously this does seem to work in Chrome & Firefox too. I am not defending the use of pre-HTML 5 wrap="off", just saying that it seems to be required for IE 11.

참고URL : https://stackoverflow.com/questions/657795/how-remove-word-wrap-from-textarea

'IT story' 카테고리의 다른 글

GOPATH 외부에 디렉토리 xxx에 대한 설치 위치가 없습니다. (0)	2020.06.25
점 표시기를 사용하여 Android View Pager를 어떻게 만듭니 까? (0)	2020.06.25
Typescript에서 문자열이 숫자인지 확인하는 방법 (0)	2020.06.25
PDO 준비 단일 쿼리에 여러 행을 삽입합니다 (0)	2020.06.25
크롬 개발자 도구에서 사람이 읽을 수있는 자바 스크립트 (0)	2020.06.25

현재글텍스트 영역에서 줄 바꿈을 어떻게 제거합니까?

hot-time

텍스트 영역에서 줄 바꿈을 어떻게 제거합니까?

텍스트 영역에서 줄 바꿈을 어떻게 제거합니까?

'IT story' 카테고리의 다른 글

'IT story'의 다른글

티스토리툴바

텍스트 영역에서 줄 바꿈을 어떻게 제거합니까?

텍스트 영역에서 줄 바꿈을 어떻게 제거합니까?

'IT story' 카테고리의 다른 글

'IT story'의 다른글

관련글

티스토리툴바