programing

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

powerit 2023. 8. 16. 22:39
반응형

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 공간을 나타냅니다. 여기서 엥 공간은 포인트 크기의 절반이고 em 공간은 현재 글꼴의 포인트 크기와 같습니다.고정 피치 글꼴의 경우 사용자 에이전트는 공백을 A 공백 문자와 동일하게 처리하고, em 공간은 두 개의 공백 문자와 동일하게 처리할 수 있습니다.

유형:SpacesHTML로

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

텍스트 사이에 두 개의 공백을 작성합니다.&ensp;

텍스트 사이에 규칙적인 공백을 만듭니다.&nbsp;

좁은 공간을 만듭니다(정규 공간과 비슷하지만 약간의 차이 -)."&thinsp";

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

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

나는 이것을 사용합니다.

CSS에서:

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

HTML에서:

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

<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를 사용하여 탭 및 간격 작성 방법을 참조하십시오.

@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

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

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

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

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

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

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

패딩으로 할 수 있어요.<span style="padding-left: 20px;">당신은 여기에서 더 많은 방법을 확인할 수 있습니다 - html의 빈 공간.

표준 CSS 사용tab-size브라우저 호환성 보기

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

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

선호하는 항목:

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

탭 크기에서 스니펫 또는 빠른 검색 예제를 확인합니다.

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

에는 일부줄항정목기위해경탭요우는청하을렬에를 사용할 수 .<table>.

을 각라입력에 <tr> ... </tr>그리고 그 선 안에 있는 각각의 요소들은<td> ... </td>그리고 물론 각 테이블 셀의 패딩을 항상 제어하여 테이블 셀 사이의 공간을 조정할 수 있습니다.

이것은 그들을 정렬하게 할 것이고 그들은 꽤 멋져 보일 것입니다 :)

이것은 저에게 효과가 있었습니다.

내 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의 답변은 (여러 줄에 걸쳐 물건을 정렬하는 것에 대한) 제 요구에 가장 가깝습니다.그러나 제공된 대로 예제 코드가 작동하지 않았지만 다음과 같이 변경해야 했습니다.

<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:150pxright:150px그러나 화면 너비에 따라 숫자를 변경해야 합니다(화면 오른쪽 가장자리에서 150픽셀).

공백?그냥 패딩으로 하면 안 돼요?그것은 생각입니다.이렇게 하면 요소 주위에 "공백 영역"을 추가할 수 있습니다.따라서 다음 CSS 태그를 사용할 수 있습니다.

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

이 코드를 사용할 수 있습니다.&#8287;HTML 컨텐츠에 공백을 추가합니다.탭 공간은 5회 이상 사용합니다.

여기에서 예를 확인하십시오. https://www.w3schools.com/charsets/tryit.asp?deci=8287&ent=ThickSpace

나의 경우, 각 단락의 시작 부분에 삽입해야 했기 때문에, 나는 다음을 했고 그것이 나에게 효과가 있었다, 나는 그것이 누군가에게 도움이 될 수 있기를 바랍니다.

p:first-letter {
    margin-left: 20px
}

다음은 "탭" 텍스트(선택, 복사 및 붙여넣기)입니다.

응답의 렌더링된 버전에 올바르게 표시되지 않을 수 있지만, 원하는 경우 마크다운 소스에서 복사하여 붙여넣을 수 있습니다.

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

반응형

'programing' 카테고리의 다른 글

아이폰에서 투명한 PNG 이미지를 염색하는 방법은 무엇입니까?  (0) 2023.08.16
반투명 배경을 만들려면 어떻게 해야 합니까?  (0) 2023.08.16
Python 스크립트에서 PowerShell 함수 실행  (0) 2023.08.16
GCC가 변수를 할당하기 전에 임시 위치로 이동하는 이유는 무엇입니까?  (0) 2023.08.16
Get-WMIObject \Get-Cim 인스턴스는 실제로 무엇을 합니까?  (0) 2023.08.11

'programing'의 다른글

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

관련글

댓글

티스토리툴바