> 웹 프론트엔드 > HTML 튜토리얼 > 사전 태그 래핑을 자동으로 만드는 방법은 무엇입니까?

사전 태그 래핑을 자동으로 만드는 방법은 무엇입니까?

黄舟
풀어 주다: 2017-07-08 11:52:12
원래의
4385명이 탐색했습니다.

 태그의 콘텐츠가 W3C 표준을 준수하도록 자동으로 줄바꿈합니다(다중 브라우저 지원). </p>
<p>기본적으로 <pre /> 태그의 콘텐츠는 자동으로 줄바꿈되지 않습니다. 범위에 관계없이 표시하거나 인쇄하는 데 문제가 있을 수 있습니다. </p>
<p>다음은 W3C 표준을 준수하고 여러 브라우저를 지원하는 CSS 스타일 코드입니다. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">pre{white-space:pre-wrap;
white-space:-moz-pre-wrap;
white-space:-pre-wrap;
white-space:-o-pre-wrap;
word-wrap:break-word;
}
로그인 후 복사

pre 태그는 HTML 콘텐츠의 형식을 그대로 유지하지만 너비가 너무 크면 페이지가 깨집니다. 이때 자동 줄 바꿈이 필요합니다.

Wrapping the pre tagMaking preformated text wrap in CSS3, Mozilla, Opera and IEis the tip that let&#39;s you use the pre tag to keep the formatting, 
without cursing yourself when some of the content is too long and doesn&#39;t wrap:
pre {white-space: pre-wrap;      
white-space: -moz-pre-wrap; 
white-space: -pre-wrap;     
white-space: -o-pre-wrap;   
word-wrap: break-word;      
}
로그인 후 복사

상위 태그에 DIV를 추가하고 CSS속성을 설정하는 것이 가장 좋습니다. word-wrap: break-word: Normal; 스타일 쓰기:

<pre   
style="width:30px;word-break:   
break-all;   
word-wrap:break-word;border:1px   
solid  #555">    
asfasdfas    
dfasd    
fa    
sdfasdf  
로그인 후 복사

기사에서는 사전 형식 출력 코드가 사용되었습니다. 기본적으로 브라우저는 사전 내용이 줄 바꿈 없이 출력되도록 강제합니다. 이 경우 코드가 커지면서 페이지 외부로 확장되는 것처럼 보입니다. 이전에는 의도적으로 코드에 줄 바꿈을 강요했습니다... 피곤합니다. 오늘은 의도적으로 검색하여 다음을 발견했습니다.

pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;word-wrap: break-word;}
로그인 후 복사

테스트 후 IE [현재 6 사용]을 제외하고 다른 모든 항목은... 우울합니다. width:600px;를 추가하면 줄이 끊어집니다. 실제로 위치는 여전히 파생됩니다. 다음과 같습니다. 코드는 들어 있지만 그 아래의 설명은 빠져 있습니다. 즉, 이 너비를 정의하는 것은 기본적으로 CSS를 직접 변경하지 않는 다른 방법은 없습니다. 그러다가 위의 CSS를 보고 생각했습니다. 다른 것을 정의할 때는 공백을 사용하고 IE를 정의할 때는 공백을 사용하지 않는 이유는 IE가 지원하지 않는 것이 아니기 때문입니다. . 그러니 그냥 추가하세요. [Google의 처음 5페이지를 살펴보았는데 CSS를 변경하여 해결할 수 있는 해결책을 찾을 수 없었습니다...].

pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;white-space: -o-pre-wrap;word-wrap: break-word;
white-space : normal ;      
}
로그인 후 복사

이 사이트에서 사용하는 것은 IE가 다른 것과 분리되어 있는데, 공백은 결국 다른 것에도 영향을 주기 때문입니다....

pre { 
white-space: pre-wrap;       
white-space: -moz-pre-wrap;  
white-space: -pre-wrap;      
white-space: -o-pre-wrap;   }
* html pre { 
word-wrap: break-word;       
white-space : normal ;      
}
로그인 후 복사

위 내용은 사전 태그 래핑을 자동으로 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿