2011-07-25 3 views
1

이 이미지에서 봐 주시기 바랍니다 :HTML DOM : 캐리지 리턴/탭을 공백으로 변환 하시겠습니까?

왼쪽 상단에

http://img713.imageshack.us/img713/7443/domhd.jpg

Foo Bar는 않지만, HelloWorld 그들 사이에 공백이없는 방법을 알 수 있습니다. 오른쪽은 마크 업을 보여줍니다. Foo 이후 또는 Bar 이전에는 공백이 없습니다. 그냥 캐리지 리턴과 몇 가지 탭. 왼쪽 하단에는 DOM이 무엇인지 보여줍니다 (Firebug 당).

질문 : FooBar 사이에 공백이 있습니까?

참고 : 여기가 JSFiddle에 있지만 공간으로 탭을 전환 한 것으로 보인다 http://jsfiddle.net/sM6rk/

원래 마크 업 (다시, 탭 공백으로 전환) :

<html> 
    <head> 
    </head> 
    <body> 
     <p>Hello<em>World</em></p> 
     <p>Foo 
      <em>Bar</em> 
     </p> 
    </body> 
</html> 
+1

- 당신이 공백은 여전히 ​​문서에 존재하고, 어떻게 볼 수 있다는 점에서 - http://i51.tinypic.com/106kcw5.png을 그럼 아래에 설명 된대로 서식이 – Gareth

답변

2

하는 CSS 스펙 즉, white-space processing model 표현을 설명한다 :

  1. [..snip ..]
  2. [..snip ..]
  3. "공백"이면 'normal'또는 'nowrap'로 설정되어 있으면 줄 바꿈 문자는 렌더링 목적으로 공백 문자, 너비가 0 인 공백 문자 (U + 200B) 또는 문자가없는 (렌더링되지 않은) 문자 중 하나로 변환됩니다. 콘텐츠 스크립트를 기반으로하는 UA 전용 알고리즘에 따라
  4. '공백'이 '일반', 'nowrap'또는 'pre-line'으로 설정된 경우 모든 탭 (U + 0009)은 공백 (U + 0020) 으로 변환됩니다. 다른 공간 (U + 0020) 다음에 오는 공간 (인라인 이전 공간)도 '공백'이 '보통', 'nowrap'또는 'pre-line'으로 설정된 경우 제거됩니다.
그것은 DOM의 크롬 경감의 표현을보고 도움이 될 수
+0

내 질문에 마크 질문입니다, 안 그래? 아니면 어떻게 든 스타일 시트 질문입니까? – StackOverflowNewbie

+0

마크 업 질문 인 경우 크롬에서 소스의 공백이 모두 DOM에 남아 있다는 것을 보여주는 내 의견에 대답이 설명되어 있습니다. 왜 모든 공백이 화면에 하나의 공백으로 나타나는 지에 대한 질문 인 경우 프리젠 테이션 질문입니다. 여기에 인용 된 CSS 스펙에 의해 답변됩니다. :) – Gareth

1

에서 HTML의 경우 모든 공백은 preserve-whitespace으로 표시된 블록 내에 있지 않는 한 단일 공백 ​​(또는 해당 언어에 해당하는 모든 공백)으로 변환됩니다. 여기에는 공백, 탭 및 줄 바꿈이 포함됩니다.

자세한 내용은 The HTML 4.01 spec을 참조하십시오.

0

예, 모든 공백 문자는 공백으로 해석되며 여러 개의 공백 문자는 단일 공백으로 해석됩니다.

따라서 Foo와 Bar 사이의 개행과 공백은 단일 공백으로 해석됩니다.

관련 문제