탭 너비 지정?

탭 너비 지정?

---

공백이 표시 될 때 (예 : <pre> 태그 등) 탭 너비를 정의 할 수 있습니까? CSS로이 작업을 수행 할 수있는 방법을 찾을 수 없지만이 작업은 일반적으로 수행하고 싶은 작업 인 것 같습니다.

제 경우에는 탭 너비가 너무 넓어서 페이지의 일부 코드 조각이 너무 넓어집니다. 스크롤바없이 맞추기 위해 탭 너비를 줄이면 훨씬 더 쉽게 할 수 있습니다. (나는 탭을 공백으로 바꿀 수 있다고 생각하지만 이상적으로는 그렇게하지 않고 이것을 수행하는 방법을 찾고 싶습니다)

---

이 블로그 게시물 이 도움이 될 것이라고 생각합니다 .

여기에 해결책이 있습니다. 탭의 모든 인스턴스에 대해 수행해야하므로 깔끔하지는 않지만 탭의 공간을 덜 차지하고 브라우저에서 복사하기위한 서식을 유지합니다 (분명히 "A SINGLE TAB HERE"를 이 블로그 소프트웨어는 항목에서 탭을 자동으로 제거합니다.) :

<span style="display:none">A SINGLE TAB HERE</span><span style="margin-left:YOUR NEW TAB WIDTH"></span>

기본적으로 코드에서 탭의 모든 인스턴스를 해당 코드 조각으로 바꿉니다 (적절한 너비를 선택한 후 스타일 시트에서 매우 쉽게 수행 할 수 있음). 코드는 복사 / 붙여 넣기를 위해 코드의 원본 탭을 유지하면서 여백을 인위적으로 삽입합니다.

덧붙여, 그것은 보이는 tab stops로 만든 CSS 사양 .

이 주제에 대한 또 다른 Stack Overflow 질문도 있습니다 .

---

tab-size 속성을 사용합니다 . 현재 공급 업체 접두사가 필요합니다. 예:

pre
{
    -moz-tab-size: 4;
    -o-tab-size:   4;
    tab-size:      4;
}

developer.mozilla.org : tab-size 문서도 참조하세요 .

.tabstop
{
    -moz-tab-size: 4;
    -o-tab-size:   4;
    tab-size:      4;
}

Unstyled tabs (browser default)
<pre>
	one tab
		two tabs
			three tabs
</pre>

Styled tabs (4em)
<pre class="tabstop">
	one tab
		two tabs
			three tabs
</pre>

---

조지 스토커가 지적했듯이 탭 정지는 미래의 CSS (FF4에 있어야 함)에서 제공되어야하지만 그동안 ...

링크 된 블로그 게시물의 문제점은 브라우저에서 복사 / 붙여 넣기 할 때 탭이 복사되지 않는다는 것입니다. 대안으로 다음을 시도하십시오.

<style>
.tabspan{
    display:inline:block;
    width:4ex;
}
</style>
<pre>
int main()
{
<span class=tabspan>\t</span>return 0;
}
</pre>

위의 "\ t"는 실제 탭 문자입니다. 이제 제대로 복사하여 붙여 넣어야합니다. <pre> 태그에 CSS 속성을 두드리는 것만 큼 좋지는 않지만 인생입니다.

(PS는이 오래된 게시물을 'css 탭 너비'에 대해 Google에서 높이 평가했으며 여기에오고 얼마 지나지 않아이 솔루션을 생각해 냈습니다.)

참고URL : https://stackoverflow.com/questions/667200/specifying-tab-width