IT

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

lottoking 2020. 8. 26. 08:06
반응형

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


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


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

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

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

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

이렇게하면 SPAN이 PRE처럼 시청.

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

CSS 선택기를 절대로 변경하는 것을 잊지 않습니다.


다음과 같이 가변합니다.

white-space: pre

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


이 시도

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

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


이 스타일을 시도

.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/

참고 URL : https://stackoverflow.com/questions/219219/how-to-change-a-span-to-look-like-a-pre-with-css

반응형