프리 태그로 텍스트를 줄 바꿈하려면 어떻게합니까?

pre 태그는 HTML의 코드 블록과 스크립트를 작성하는 동안 출력을 디버깅하는 데 매우 유용하지만 한 줄을 인쇄하는 대신 텍스트 줄 바꿈을 어떻게 수행합니까?

이 페이지 의 CSS 답변은 다음 과 같습니다.

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

이것은 텍스트를 감싸고 pre-tag 내에서 공백을 유지하는 데 효과적입니다 .

pre {
    white-space: pre-wrap;
}

프리 태그를 건너 뛰고 공백을 사용하는 경우 div의 프리 랩이 더 나은 솔루션이라는 것을 알았습니다.

 <div style="white-space: pre-wrap;">content</div>

간결하게 말해서, 이것은 내용을 단어를 깨지 않고 "pre"태그 안에 넣도록 강제합니다. 건배!

pre {
  white-space: pre-wrap;
  word-break: keep-all
}

여기에서 라이브 예제를 참조 하십시오 .

이것이 내가 필요한 것입니다. 그것은 단어가 깨지지 않도록하지만 사전 영역에서 동적 너비를 허용했습니다.

word-break: keep-all;

나는 사전을 잊어 버리고 텍스트 영역에 넣는 것이 좋습니다.

들여 쓰기가 유지되고 경로 중간에 단어가 줄 바꿈되지 않습니다.

클립 보드에 복사하려는 경우 텍스트 영역에서도 텍스트 범위를 쉽게 선택할 수 있습니다.

다음은 PHP 발췌 부분이므로 PHP가 아닌 경우 HTML 특수 문자를 포장하는 방법은 다양합니다.

<textarea style="font-family:monospace;" onfocus="copyClipboard(this);"><?=htmlspecialchars($codeBlock);?></textarea>

js에서 클립 보드에 텍스트를 복사하는 방법에 대한 자세한 내용 은 JavaScript로 클립 보드에 복사하는 방법을 참조하십시오. .

하나...

방금 stackoverflow 코드 블록을 검사하고 CSS로 <pre> 태그로 싸인 <code> 태그로 래핑합니다 ...

code {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
}
pre {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
  margin-bottom: 10px;
  max-height: 600px;
  overflow: auto;
  padding: 5px;
  width: auto;
}

또한 stackoverflow 코드 블록의 내용은 http://code.google.com/p/google-code-prettify/ 사용하여 구문 강조 표시됩니다 .

좋은 설정이지만 지금은 텍스트 영역을 사용하고 있습니다.

@richelectron과 @ user1433454 답변을 결합했습니다.
잘 작동하고 텍스트 서식을 유지합니다.

<pre  style="white-space: pre-wrap; word-break: keep-all;">

</pre>

다음 중 하나를 수행 할 수 있습니다.

pre { white-space: normal; }

모노 스페이스 글꼴을 유지하면서 자동 줄 바꿈을 추가하려면 다음을 수행하십시오.

pre { overflow: auto; }

긴 줄을 가로로 스크롤하여 고정 크기를 허용합니다.

사용해보십시오

<pre style="white-space:normal;">. 

또는 CSS를 더 잘 던지십시오.

s white-space: pre-wrap내부 pre의 자동 줄 바꿈에 일부 접두사를 사용하십시오 .

word-wrap: break-word물론 이것은 당신이 원하지 않는 것 인 단어를 반으로 나누기 때문에 사용하지 마십시오 .

Best Cross Browser Way는 줄 바꿈을 얻고 정확한 코드 또는 텍스트를 표시하기 위해 일했습니다 (chrome, internet explorer, Firefox)

CSS :

xmp{ white-space:pre-wrap; word-wrap:break-word; }

HTML :

<xmp> your text or code </xmp>

다음이 도움이되었습니다.

pre {
    white-space: normal;
    word-wrap: break-word;
}

감사

<pre>- 요소는 "사전 형식의 텍스트"를 의미하고, 그 태그 사이에있는 텍스트 (또는 무엇이든)의 형식을 유지하기위한 것입니다. 따라서 실제로 <pre>-Tag 내에 자동 단어 줄 바꿈 또는 줄 바꿈이있는 것은 아닙니다.

요소의 텍스트는 고정 폭 글꼴 (일반적으로 Courier)로 표시되며 공백 과 줄 바꿈을 모두 유지합니다 .

출처 : w3schools.com 은 본인이 강조합니다.