문제

Question

그래서, 보통과 같이 내 HTML 소스 코드를 포맷 : 그러나

<article> 
    <section> 
     <p> 
      Text... 
      Text... 
     </p> 
     <pre> 
      Code... 
      Code... 
      Code... 
     </pre> 
     <p> 
      Text... 
      Text... 
     </p> 
    </section> 
</article> 

을,이 포맷 스타일은 이러한 요소 내부의 모든 공백 이후 PRE 요소와 호환되지 않습니다 중요하다.

는 여기를 참조하십시오 :http://jsfiddle.net/pjEYm/

코드 블록의 프리젠 테이션을 해결하기 위해, 나는과 같이 소스 코드를 포맷해야 할 것입니다 :

<article> 
    <section> 
     <p> 
      Text... 
      Text... 
     </p> 
     <pre> 
      Code... 
Code... 
Code...</pre> 
     <p> 
      Text... 
      Text... 
     </p> 
    </section> 
</article> 

여기를 참조하십시오 :http://jsfiddle.net/pjEYm/1/

을

그러나 이것은 소스 코드의 깔끔하고 가독성을 떨어 뜨립니다.

서식 스타일을 유지할 수있는 솔루션을 사용하고 싶습니다.

white-space 속성을 설정해 보았습니다. 솔루션에 가장 가까운 것이 white-space: pre-line이지만 코드에서 들여 쓰기도 모두 제거됩니다.

는 여기를 참조하십시오 :http://jsfiddle.net/pjEYm/2/show/

그래서, 자바 스크립트와 함께 갔다 :

$('pre').each(function() { 
    var lines, offset; 

    // split the content of the PRE element into an array of lines 
    lines = $(this).text().split('\n'); 

    // the last line is expected to be an empty line - remove it 
    if (lines.length > 1 && lines[ lines.length - 1 ].trim() === '') { 
     lines.pop(); 
    } 

    // how much white-space do we need to remove form each line? 
    offset = lines[ 0 ].match(/^\s*/)[ 0 ].length; 

    // remove the exess white-space from the beginning of each line 
    lines = lines.map(function (line) { 
     return line.slice(offset); 
    }); 

    // set this new content to the PRE element 
    $(this).text(lines.join('\n')); 
}); 

라이브 데모 :http://jsfiddle.net/pjEYm/3/

이 작동하는 동안, 나는 여전히 어떤 종류의 선호 CSS 솔루션. 하나 있습니까?

Answer 1

pre 요소에 음수 여백을 설정할 수 있지만 고정 숫자와 ch 유닛 (보편적으로 지원되지 않음)을 사용하여 설정해야한다는 점을 제외하면 CSS 솔루션이 없습니다. 이것은 다소 어색하고 융통성이없고 신뢰할 수 없습니다.

요소는 미리 서식이 지정된 텍스트를 의미하며 실제로 원하지 않는 한이를 사용해서는 안됩니다. 프로그램 코드의 경우, 단지 줄 바꿈 (<br>)을 사용하고 들여 쓰기를 위해 no-break 공백을 사용할 수 있습니다 (이론적으로 신뢰할 수는 없지만 실제로 작동합니다). 그러나 HTML 소스의 레이아웃을 깨뜨린 경우에도 미리 서식을 지정하여 표시하려는 데이터 만 포함하는 것이 가장 간단하고 안전하게 이루어집니다 (일부 사용자에게만 관심이 있습니다).