IT

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

lottoking 2020. 5. 27. 07:58
반응형

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

가능한 방법 :

<pre> ... </pre>

또는

style="white-space:pre"

다른 거있어?

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

&emsp; 과 &ensp;

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

수평 스페이서의 경우 :

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

수직 스페이서의 경우 :

<span style="display:block; height: YOURHEIGHT;"></span>

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

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

시도하십시오 &emsp;.

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

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

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

CSS에서 :

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

HTML에서 : 

<p>Some Text <span class="tab">Tabbed Text</span></p>

SpacesHTML의 유형

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

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

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

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

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

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

<p style="text-indent: 5em;">
The first line of this paragraph will be indented about five characters, similar to a tabbed indent.
</p>

이 단락의 첫 줄은 탭 들여 쓰기와 비슷한 약 5 자로 들여 쓰기됩니다.

자세한 내용은 HTML 및 CSS를 사용하여 탭 및 간격을 만드는 방법을 참조하십시오 .

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

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

padding-left
padding-right
padding-top
padding-bottom

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

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

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

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

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

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

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

그리고 HTML 구현 ...

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

Screenshot of this code sample

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

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

padding: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;

표준 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>

이것은 나를 위해 일했다 :

내 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

user8657661's answer is closest to my needs (of lining things up across several lines). However, I couldn't get the example code to work as provided, but I needed to change it as follows:

<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>

If you need right-aligned numbers you can change left:150px to right:150px, but you'll need to alter the number based on the width of the screen (as written the numbers would be 150 pixels from the right edge of the screen).

You can use this code &#8287; to add a space in the HTML content. For tab space, use it 5 times or more.

Check an example here: https://www.w3schools.com/charsets/tryit.asp?deci=8287&ent=ThickSpace

Here is a "Tab" text (copy and paste): " "

It may appear different or not a full tab because of the answer limitations of this site.

참고URL : https://stackoverflow.com/questions/9792849/how-to-insert-spaces-tabs-in-text-using-html-css

반응형

'IT' 카테고리의 다른 글

자바 스크립트에서 캐시 지우기  (0) 2020.05.27
숫자가 int인지 float인지 확인하십시오.  (0) 2020.05.27
Visual Studio에서 기본적으로 프로젝트에서 보안 경고 (_CRT_SECURE_NO_WARNINGS) 제거  (0) 2020.05.27
Android 스튜디오에서 프로젝트를 내보내려면 어떻게해야합니까?  (0) 2020.05.27
최대 절전 모드에서 지연 로딩이란 무엇입니까?  (0) 2020.05.27

'IT'의 다른글

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

관련글

댓글

티스토리툴바