사전 태그에서 텍스트를 줄 바꿈하려면 어떻게합니까?

사전 태그에서 텍스트를 줄 바꿈하려면 어떻게합니까?

---

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>

---

이것이 내가 필요한 것입니다. 단어가 깨지는 것을 방지했지만 사전 영역에서 동적 너비를 허용했습니다.

word-break: keep-all;

---

가장 간결하게 말하면 콘텐츠가 단어를 분리하지 않고 "pre"태그 내부로 감싸도록합니다. 건배!

pre {
  white-space: pre-wrap;
  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/를 사용하여 구문 강조 표시됩니다 .

좋은 설정이지만 지금은 텍스트 영역으로 이동합니다.

---

I combined @richelectron and @user1433454 answers.
It works very well and preserves the text formatting.

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

</pre>

---

You can either:

pre { white-space: normal; }

to maintain the monospace font but add word-wrap, or:

pre { overflow: auto; }

which will allow a fixed size with horizontal scrolling for long lines.

---

Try using

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

Or better throw CSS.

---

The Best Cross Browser Way worked for me to get line breaks and shows exact code or text: (chrome, internet explorer, Firefox)

CSS:

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

HTML:

<xmp> your text or code </xmp>

---

The following helped me:

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

Thanks

---

The <pre>-Element stands for "pre-formatted-text" and is intended to keep the formatting of the text (or whatever) between its tags. Therefore it is actually not inteded to have automatic word-wrapping or line-breaks within the <pre>-Tag

Text in a element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

source: w3schools.com, emphasises made by myself.

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