CSS로 프리처럼 보이도록 스팬을 변경하는 방법은 무엇입니까?

108

<span>태그 (또는 <div>) 를 변경 하여 <pre>태그가 CSS 만 사용 하는 것처럼 내용을 미리 포맷 할 수 있습니까?

html css

— jsight
소스

164

상기 봐 W3C의 CSS2.1 기본 스타일 시트 또는 CSS2.2 작업 초안 . PRE의 모든 설정을 복사하여 자신의 수업에 넣으십시오.

pre {
    display: block;
    unicode-bidi: embed;
    font-family: monospace;
    white-space: pre;
}

— Diodeus-James MacFarlane
소스

1

이러한 기본값의 출처를 이해하려면이 방법을 사용하는 것이 좋습니다.

— Diodeus-James MacFarlane

2

이것을 시도하면 줄 바꿈이 유지되지 않습니다.

— Agnel Kurian 2014

<pre> 태그는 텍스트가 너무 넓을 때 수평 스크롤바를 표시하지만이 CSS는 그렇지 않습니다. 누구든지 그들을 보여주는 방법을 알고 있습니까?

— shindigo

1

@shindigo 사용해 보셨습니까 overflow: scroll? 또는 당신은 단지 수평 이동하려면 overflow-x: scroll developer.mozilla.org/en-US/docs/Web/CSS/overflow

— Kanmuri

1

@shindigo overflow: auto;가 더 좋을 수 있습니다. 그렇지 않으면 필요하지 않을 때 두 세트의 스크롤바로 끝날 수 있습니다.

— Spechal 19

57

공백 CSS 속성을 참조하세요 .

.like-pre { white-space: pre; }

— 피스 토스
소스

7

또는 white-space: pre-wrap유용 할 수 있습니다 . 처럼 동작 pre하지만 긴 줄을 감 쌉니다.

— Kai Carver

25

이렇게하면 SPAN이 PRE처럼 보입니다.

span {
  white-space: pre;
  font-family: monospace;
  display: block;
}

CSS 선택기를 적절하게 변경하는 것을 잊지 마십시오.

— Shiny and New 安宇 씨
소스

5

구체적으로보고있는 속성은 다음과 같습니다.

white-space: pre

http://www.quirksmode.org/css/whitespace.html
http://www.w3.org/TR/CSS21/text.html#white-space-prop

— Sören Kuklau
소스

2

이 시도

span {
    white-space: pre;
    font-family: monospace;
    display: block;
    unicode-bidi: embed
}

— 야니
소스

1

이 스타일을 시도

.pre {

white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
line-height: 1.5;   
word-break: break-all;
white-space: pre;
white-space: pre\9; /* IE7+ */
display: block;
}

여기에서 동일하게 사용됨-http: //www.makemyshop.in/

— 예수 라지
소스

0

span 태그 대신 <pre> 태그를 사용하지 않는 이유는 무엇입니까? 둘 다 인라인이므로 둘 다 원하는 방식으로 작동해야합니다. <pre>의 전체 정의를 재정의하는 데 문제가있는 경우 클래스 / ID를 제공하십시오.

1

때로는 페이지에 이미 범위가 있고 기존 CMS 시스템의 일부인 것처럼 변경할 수없는 경우가 있습니다.

— Mr. Shiny and New 安宇

B / c 프레임 워크는 내가 요청한대로 내 <pre> 아래에 콘텐츠를 넣는 것을 거부합니다. 이 문제를 해결할 수는 있지만 CSS 소품 몇 개를 설정하는 것보다 훨씬 어렵습니다.

— jsight