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

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

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- 태그:

pre {
    white-space: pre-wrap;
}

프리태그를 건너뛰고 공백(div에 프리랩)을 사용하는 것이 더 좋은 해결책이라는 것을 알게 되었습니다.

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

가장 간결하게는, 이 때문에, 컨텐츠가 강제적으로,pre말꼬리를 끊지 않고 따라붙다

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

@richelectron과 @user1433454의 답변을 조합했습니다.
매우 잘 작동하며 텍스트 서식을 유지합니다.

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

</pre>

이게 필요했어.글자가 깨지는 것을 막았지만, 사전 영역의 동적 폭은 허용했습니다.

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/ 를 사용하여 구문을 강조 표시합니다.

좋은 설정이지만 지금은 문자메시지만 보낼게요.

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

pre { white-space: normal; }

monospace 글꼴을 유지하되 워드 맵을 추가합니다.또는 다음과 같이 입력합니다.

pre { overflow: auto; }

가로 스크롤로 긴 줄에 고정 크기를 사용할 수 있습니다.

사용하다white-space: pre-wrap및 벤더 프리픽스(내부 자동 줄 바꿈)pres.

사용 안 함word-wrap: break-word왜냐하면 이것은 물론 당신이 원하지 않는 단어를 반으로 나누기 때문이다.

사용해보십시오.

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

아니면 CSS를 던지는 게 낫지

사전 태그 안에 텍스트를 줄 바꿈하려면 다음과 같이 하십시오.

pre {
 white-space: pre-wrap;       /* css-3 */
 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>Element는 "사전 포맷된 텍스트"의 약자로 태그 사이에 텍스트(또는 기타)의 서식을 유지하는 것을 목적으로 합니다.따라서 자동 단어 바꿈 또는 줄 바꿈은 실제로는 의도되지 않습니다.<pre>- - ★★★

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

출처: w3schools.com, 내가 만든 것을 강조한다.

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 {
    overflow-x: auto !important;
    white-space: pre-wrap !important;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -pre-wrap !important;      /* Opera 4-6 */
    white-space: -o-pre-wrap !important;    /* Opera 7 */
    word-wrap: break-word !important;       /* Internet Explorer 5.5+ */
}

code{
    white-space: normal !important;
}

<pre>에 대해서는, 「코드로」라고 것이 .<code>붙이다

언급URL : https://stackoverflow.com/questions/248011/how-do-i-wrap-text-in-a-pre-tag