HTML / CSS를 사용하여 텍스트에 공백 / 탭을 삽입하는 방법

183

가능한 방법 :

<pre> ... </pre>

또는

style="white-space:pre"

다른 거있어?

html  css  tabs  space  pre 
— 예선
소스
1
— benedict_w
"태그"또는 "탭"을 의미합니까?
— user123444555621
2
&nbsp;탭을 만드는 것과 동등한 것이 있습니까?
— Juan Solano
이 &tab;없지만 github 에서이 작은 js 스 니펫을 찾았습니다 (기본적으로 5 &nbsp;행 을 찾기 위해 바꾸기 및 바꾸기 ) ... gist.github.com/AustinDizzy/1231e82184bea35c42ad
— dgig

답변:

145

tab space두 단어 / 문장 사이에 삽입하려면 일반적으로 사용합니다

&emsp; 과 &ensp;

— 기리
소스
113

공간의 너비 / 높이가 초과하는 경우 &nbsp;일반적으로 다음을 사용합니다.

수평 스페이서의 경우 :

<span style="display:inline-block; width: YOURWIDTH;"></span>

수직 스페이서의 경우 :

<span style="display:block; height: YOURHEIGHT;"></span>
— 자폴
소스
참고 : 픽셀 단위로 높이 또는 너비를 지정하십시오 (예 : 10px).
— About7Deaths
57

당신이 사용할 수있는 &nbsp;, 공간에 대한 &lt;위해 <(적은 개체 수보다 &#60;)과 &gt;대한 >(이상, 법인 번호 &#62;).

전체 목록은 HTML 엔티티 에서 찾을 수 있습니다 .

— 할림 카 로움
소스
43

시도하십시오 &emsp;.

특수 문자 의 설명서에 따라 :

문자 엔티티 &ensp;와 &emsp;실내 공간의 절반 포인트 크기 및 EM 공간이 현재의 폰트의 포인트 크기에 동일한 경우, 각각 실내 공간과 전각 공간을 나타낸다. 고정 피치 글꼴의 경우, 사용자 에이전트는 en 공백을 A 공백 문자와 같고 em 공백을 2 개의 공백 문자와 동일하게 취급 할 수 있습니다.

— 아비 ish 고엘
소스
24

나는 이것을 사용하고 싶다 :

CSS에서 :

.tab { 
       display:inline-block; 
       margin-left: 40px; 
}

HTML에서 : 

<p>Some Text <span class="tab">Tabbed Text</span></p>
— 이바 해리스
소스
1
이것은 좋은 대답입니다. 하지만 난 그냥 (이 교체 의미는 CSS 클래스 대신 ID를 사용하여 더 나은 될 것이라고 말하고 싶다 #tab가 .tab와 id="tab"에 의해 class="tab"우리가 같은 문서에 두 번 이상을 사용하는 경우, 우리는 정의되지 않은 행동이있을 수 있기 때문에). 예를 들어이 질문 을 참조하십시오 .
— Hilder Vitor Lima Pereira
오늘 도움이되었습니다. 정말 고맙습니다.
— justnisar
19

SpacesHTML의 유형

텍스트 사이에 4 개의 공백을 만듭니다. &emsp;

텍스트 사이에 두 개의 공백을 만듭니다- &ensp;

텍스트 사이에 일정한 간격을 만듭니다- &nbsp;

좁은 공간을 만듭니다 (일반 공간과 비슷하지만 약간의 차이가 있습니다- "&thinsp";

문장 사이의 간격- "</br>"

이 링크가 도움이 될 수 있습니다. [ https://hea-www.harvard.edu/~fine/Tech/html-sentences.html]을 확인 하십시오.

— 비벡 부디 티
소스
6

<span style="padding-left:68px;"></span>

다음을 사용할 수도 있습니다.

padding-left
padding-right
padding-top
padding-bottom
— Ron1925
소스
4

@Ivar보다 한 걸음 더 나아가서 나만의 맞춤 태그 스타일을 지정하십시오. '탭'은 기억하기 쉽고 입력하기 쉽습니다.

tab {
    display: inline-block;
    margin-left: 40px;
}

그리고 HTML 구현 ...

<p>Left side of the whitespace<tab>Right side of the whitespace</p>

이 코드 샘플의 스크린 샷

그리고 내 스크린 샷은 ...

— 단
소스
3

일부 줄에 물건을 맞추기 위해 탭을 요청하는 경우을 사용할 수 있습니다 <table>.

에 각 줄을 넣습니다 <tr> ... </tr>. 그리고 그 줄 안의 각 요소는에 <td> ... </td>있습니다. 물론 각 테이블 셀의 패딩을 제어하여 테이블 셀 사이의 간격을 조정할 수 있습니다.

이렇게하면 정렬되고 꽤 멋지게 보입니다. :)

— 아르젠토
소스
3
표는 형식이 아닌 테이블 형식 데이터를 나타내는 데 사용해야합니다. HTML의 제한과 브라우저에서 일관되게 작동하는 스타일로 HTML을 작성하는 좌절 때문에 포맷에 자주 사용되는 90 년대 표. 오늘날 그것은 반 패턴으로 간주됩니다.
— David Baucum
나는 당신의 요점을 봅니다. 그것은 구식 해결책일지도 모르지만 한 번 그의 문제가 있었고 테이블을 사용하는 것이 나에게 완벽했습니다.
— Argento
1
예, 그러나 의미 론을 엉망으로 만들지 않고 테이블 스타일 (현대 CSS 포함)을 사용할 수 있습니다! 디스플레이 : 테이블 등
— Julix
3

고정 공간 또는 하드 공간이라고도하는 NBSP ( Non-breaking Space )는 프로그래밍 및 워드 프로세싱에서 워드 랩으로 분리 할 수없는 줄에 공간을 만들기 위해 사용됩니다.

HTML을 &nbsp;사용하면 소스 코드뿐만 아니라 웹 페이지에서도 볼 수있는 여러 공간을 만들 수 있습니다.

— 아스트로
소스
1

여백? 패딩 만 사용할 수 없습니까? 아이디어입니다. 이것이 요소 주위에 "빈 영역"을 추가하는 방법입니다. 따라서 다음 CSS 태그를 사용할 수 있습니다.

padding: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
— 제임스 팩
소스
1

표준 CSS를 사용하십시오 tab-size.

탭 기호를 삽입하려면 (표준 탭 키인 경우 커서 이동) Alt+ 0+ 0+를 누릅니다.9

.element {
    -moz-tab-size: 4;
    tab-size: 4;
}

내가 선호하는 것 :

*{-moz-tab-size: 1; tab-size: 1;}

tab-size 에서 스 니펫 또는 빠른 찾기 예제를보십시오 .

.t1{
    -moz-tab-size: 1;
    tab-size: 1;
}
.t2{
    -moz-tab-size: 2;
    tab-size: 2;
}
.t4{
    -moz-tab-size: 4;
    tab-size: 4;
}
pre {border: 1px dotted;}
<h3>tab = {default} space</h3>
<pre>
	one tab text
		two tab text
</pre>

<h3>tab = 1 space</h3>
<pre class="t1">
	one tab text
		two tab text
</pre>

<h3>tab = 2 space</h3>
<pre class="t2">
	one tab text
		two tab text
</pre>

<h3>tab = 4 space</h3>
<pre class="t4">
	one tab text
		two tab text
</pre>
스 니펫 확장

— MrSwed
소스
0

이것은 나를 위해 일했다 :

내 CSS에는 다음이 있습니다.

tab0  { position:absolute;left:25px;  }
tab1  { position:absolute;left:50px;  }
tab2  { position:absolute;left:75px;  }
tab3  { position:absolute;left:100px; }
tab4  { position:absolute;left:125px; }
tab5  { position:absolute;left:150px; }
tab6  { position:absolute;left:175px; }
tab7  { position:absolute;left:200px; }
tab8  { position:absolute;left:225px; }
tab9  { position:absolute;left:250px; }
tab10 { position:absolute;left:275px; }

그런 다음 HTML에서 탭을 사용합니다.

Dog Food <tab3> :$30
Milk <tab3> :$3
Pizza Kit <tab3> :$5
Mt Dew <tab3> :$1.75
— 사용자
소스
0

user8657661의 답변 은 내 요구에 가장 가깝습니다 (여러 줄에 걸쳐 줄을 지어 놓는 것). 그러나 제공된 코드를 제공 한대로 작동시키지 못했지만 다음과 같이 변경해야했습니다.

<html>
    <head>
        <style>
            .tab9 {position:absolute;left:150px; }
        </style>
    </head>

    <body>
        Dog Food: <span class="tab9"> $30</span><br/>
        Milk of Magnesia:<span class="tab9"> $30</span><br/>
        Pizza Kit:<span class="tab9"> $5</span><br/>
        Mt Dew <span class="tab9"> $1.75</span><br/>
    </body>
</html>

오른쪽 맞춤 숫자가 필요한 경우로 변경할 left:150px수 right:150px있지만 화면 너비를 기준으로 숫자를 변경해야합니다 (표시된 숫자는 화면 오른쪽 가장자리에서 150 픽셀 임).

— 스티브 맥 로버츠
소스
-2

"탭"텍스트 (복사 및 붙여 넣기)는 다음과 같습니다. ""

이 사이트의 답변 제한으로 인해 다르게 표시되거나 전체 탭이 아닐 수도 있습니다.

— 제임스
소스
1
답을 더 명확하게 표현해야한다고 생각합니다. 어딘가에서 공간을 복사하여 붙여 넣는 것을 의미합니까? 나는 그것이 여기서 효과가 있다고 생각하지 않습니다.
— smilyface
1
Markdown 소스에는 TAB이 있지만 HTML 출력에는 없습니다 (대신 단일 공간 임).
— Peter Mortensen
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.