여러 줄 바꿈하지 않는 공백 ( "nbsp") 대신 탭 공백?

developer tip

여러 줄 바꿈하지 않는 공백 ( "nbsp") 대신 탭 공백?

optionbox 2020. 9. 28. 09:00

여러 줄 바꿈하지 않는 공백 ( "nbsp") 대신 탭 공백?

 네 번 입력하는 대신 HTML에 탭 문자를 삽입 할 수 있습니까?

CSS를 사용하는 것이 훨씬 깨끗합니다. 대신 padding-left:5em또는 margin-left:5em적절하게 시도하십시오 .

사용하려는 문자 집합에 따라 다릅니다.

ISO-8859-1 HTML에 정의 탭 개체가 없습니다 -하지만 이외의 공백 문자의 부부가  같은이  , &ensp;그리고 &emsp;.

ASCII에서는 	탭입니다.

다음 은 HTML 엔티티의 전체 목록과 Wikipedia의 공백에 대한 유용한 토론입니다 .

아니요, 탭 은 HTML에 관한 한 공백 일뿐 입니다. 내가 권하고 싶습니다 EM-공간 이 큰하는 대신 (→ | | ←) ... 일반적으로 4 넓은 공간 - 그리고는 입력입니다 &emsp;.

운이 좋으면 유니 코드 문자 ( " ")를 사용하여 벗어날 수도 있습니다 .

다음은 유니 코드로 된 공백 문자 및 "폭이없는 공백" 목록입니다 .

& emsp; 답입니다.

그러나 Word, Wordperfect, Open Office, Wordworth 등과 같은 워드 프로세서에서 가로 표를 사용하는 데 익숙하다면 예상 한 것만 큼 기능하지 않을 것입니다. 너비가 고정되어 있으며 사용자 지정할 수 없습니다.

CSS는 W3C가 공식 솔루션을 제공 할 때까지 훨씬 더 강력한 제어 기능을 제공하고 대안을 제공합니다.

예:

padding-left:4em

..또는..

margin-left:4em

..적절한

사용하려는 문자 집합에 따라 다릅니다.

일부 탭 태그를 설정하고 h 태그를 사용하는 방법과 유사하게 사용할 수 있습니다.

<style>
    tab1 { padding-left: 4em; }
    tab2 { padding-left: 8em; }
    tab3 { padding-left: 12em; }
    tab4 { padding-left: 16em; }
    tab5 { padding-left: 20em; }
    tab6 { padding-left: 24em; }
    tab7 { padding-left: 28em; }
    tab8 { padding-left: 32em; }
    tab9 { padding-left: 36em; }
    tab10 { padding-left: 40em; }
    tab11 { padding-left: 44em; }
    tab12 { padding-left: 48em; }
    tab13 { padding-left: 52em; }
    tab14 { padding-left: 56em; }
    tab15 { padding-left: 60em; }
    tab16 { padding-left: 64em; }
</style>

... 다음과 같이 사용하십시오.

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Tabulation example</title>

        <style type="text/css">
            dummydeclaration { padding-left: 4em; } /* Firefox ignores first declaration for some reason */
            tab1 { padding-left: 4em; }
            tab2 { padding-left: 8em; }
            tab3 { padding-left: 12em; }
            tab4 { padding-left: 16em; }
            tab5 { padding-left: 20em; }
            tab6 { padding-left: 24em; }
            tab7 { padding-left: 28em; }
            tab8 { padding-left: 32em; }
            tab9 { padding-left: 36em; }
            tab10 { padding-left: 40em; }
            tab11 { padding-left: 44em; }
            tab12 { padding-left: 48em; }
            tab13 { padding-left: 52em; }
            tab14 { padding-left: 56em; }
            tab15 { padding-left: 60em; }
            tab16 { padding-left: 64em; }

        </style>

    </head>

    <body>
        <p>Non tabulated text</p>

        <p><tab1>Tabulated text</tab1></p>
        <p><tab2>Tabulated text</tab2></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab2>Tabulated text</tab2></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab4>Tabulated text</tab4></p>
        <p>Non tabulated text</p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab1>Tabulated text</tab1></p>
        <p><tab2>Tabulated text</tab2></p>

    </body>

</html>

위의 스 니펫을 실행하여 시각적 예를 확인하세요.

추가 토론

ISO-8859-1 HTML에 정의 된 수평 테이블 엔티티가 없지만 &nbsp, 예를 들어 일반적인 것보다 사용할 수있는 다른 공백 문자가 있습니다 .  , &ensp;및 앞서 언급 한 &emsp;.

또한 ASCII 및 유니 코드에서 	수평 표 라는 점을 언급 할 가치가 있습니다.

시험 &emsp;

4  초에 해당합니다 .

다음은 빈 공간을 삽입하기 위해 HTML에서 제공하는 3 가지 방법입니다.

 단일 공백을 추가하려면 입력 하십시오.
&ensp;공백 2 개를 추가하려면 입력 합니다.
&emsp;공백 4 개를 추가하려면 입력 하십시오.

단락 내부 (또는 중간)에 여러 공백을 삽입하는 쉬운 방법은 없습니다. CSS 사용을 제안하는 사람들은 요점을 놓치고 있습니다. 항상 한 쪽에서 단락을 들여 쓰려고하는 것은 아니지만 실제로는 특정 부분에 추가 공백을 넣으려고합니다.

본질적으로,이 경우, 공간이 될 내용 과 없는 스타일. 왜 그렇게 많은 사람들이 그것을 보지 못하는지 모르겠습니다. 나는 그들이 스타일과 내용 규칙의 분리를 강요하려고 시도하는 강성을 생각한다 (HTML은 처음부터 두 가지를 모두 수행하도록 설계되었다- 더 많은 비용을 지출하지 않고도 적절한 태그를 사용하여 고유 한 요소의 스타일을 가끔 정의하는 것은 잘못된 것이 아니다. CSS 스타일 시트를 만드는 데 시간이 걸리고 적당히 사용할 때 읽을 수없는 것이 전혀 없습니다. 무언가를 빠르게 할 수 있다는 것에 대해 말할 것도 있습니다.) 공백 문자를 용도로만 사용되는 것으로 간주 할 수있는 방법으로 변환됩니다. 스타일과 들여 쓰기.

에 의존 할 필요없이 공백을 삽입 할 우아한 방법이 없습니다 때 &emsp;와  태그, 나는 결과 코드에 공백이 많은 수의 삽입 빨리 당신을 허용했을 적절라는 이름의 태그가 있었다 경우보다 훨씬 더 unreadible되고 있다는 주장 (또는 처음에 공간이 불필요하게 소비되지 않은 경우).

그래도 위에서 말했듯 &emsp;이 올바른 위치에 삽입 하는 것이 가장 좋은 방법입니다 .

사전 태그 를 사용하는 것이 좋습니다 . 사전 태그를 정의 텍스트를 미리 포맷.

<pre>
 This is
preformatted text.
It preserves      both spaces

and line breaks.

</pre>

이 링크 에서 사전 태그에 대해 자세히 알아보십시오.

나는 방법을 찾다가 이것을 발견하고 원하는 것을 쉽게 작동하는 것 같은 내 자신을 찾아 냈다. 나는 여기에 게시하는 것이 처음이므로 이것이 효과가 있기를 바랍니다 ... 그러나 CSS에 이것을 가지고 있습니다.

span.tab{
    padding: 0 80px; /* Or desired space*/
}

그런 다음 HTML에서 필요한 것처럼 중간 문장에 "긴 탭"이 있어야합니다.

<span class="tab"></span>

당신이 필요로 하는 양  또는 그로부터 저장 &emsp;합니다.

이것이 누군가에게 도움이되기를 바랍니다.

&emsp;, &ensp;,  또는  사용할 수 있습니다.

W3 말한다 ...

The character entities &ensp; and &emsp; denote an en space and an em space respectively, where an en space is half the point size and an em space is equal to the point size of the current font.

HTML3 용 W3.org에서 자세히 알아보기

HTML4 용 W3.org에서 자세히 알아보기

Wikipedia 에서 더

AFAIK, 유일한 방법은

&nbsp;

CSS를 사용할 수 있다면 패딩이나 여백을 사용할 수 있습니다. 상자 모델을 참조 하고 Internet Explorer의 경우 Internet Explorer 상자 모델 버그를 참조하십시오 .

공백이 없게되면 그 중요한, 사전 포맷 텍스트와 <전> 태그를 사용하는 것이 더있을 수 있습니다.

단락의 첫 번째 문장 만 들여 쓰려는 경우 작은 CSS 트릭으로이를 수행 할 수 있습니다.

p:first-letter {
    margin-left: 5em;
}

<tab> 태그는 HTML3에 도입 되었음에도 불구하고 브라우저에 적용되지 않았습니다. 우리가 가능하다면 많은 상황에서 삶이 훨씬 더 쉬울 것이기 때문에 나는 항상 그것이 정말 유감이라고 생각했습니다. 그러나 가짜 <tab> 태그를 제공하기 위해이 문제를 쉽게 해결할 수 있습니다. HTML의 헤드에 다음을 추가하거나 스타일 태그없이 CSS에 추가합니다.

<style>
    tab { padding-left: 4em; }
</style>

From then on, when you need a tab in your document put <tab> in there. It isn't a true tab because it doesn't align to tab-marks, but it works for most needs, without having to dither around with clumsy character entities or spans. It makes it really easy to check your source, and a cinch to format simple things where you don't want to go to the hassle of tables or other more complex "solutions".

One nice aspect of this solution is that you can do a quick search/replace of a text document to replace all TABs with the <tab> tag.

You might be able to define a bunch of true absolute position TABs, then use the appropriate tab (e.g. <tab2> or <tab5> or whatever) where needed, but I haven't found a way to do that without it indenting subsequent lines.

You can use a table and apply a width attribute to the first <td>.

Code:

<table>
    <tr>
        <td width="100">Content1</td>
        <td>Content2</td>
    </tr>
    <tr>
        <td>Content3</td>
        <td>Content4</td>
    </tr>
</table>

Result

Content1       Content2
Content3       Content4

I have used a span with in line styling. I have had to do this as I as processing a string of plain text and need to replace the \t with 4 spaces (appx). I couldn't use   as further on in the process they were being interpreted so that the final mark up had non-content spaces.

HTML:

<span style="padding: 0 40px">&nbsp;</span>

I used it in a php function like this:

$message = preg_replace('/\t/', '<span style="padding: 0 40px">&nbsp;</span>', $message);

If you needed only one tab, the following worked for me.

<style>
  .tab {
    position: absolute;
    left: 10em;
   }
</style>

with the HTML something like:

<p><b>asdf</b> <span class="tab">99967</span></p>
<p><b>hjkl</b> <span class="tab">88868</span></p>

You can add more "tabs" by adding additional "tab" styles and changing the HTML such as:

<style>
  .tab {
    position: absolute;
    left: 10em;
   }
  .tab1 {
    position: absolute;
    left: 20em;
   }
</style>

with the HTML something like:

<p><b>asdf</b> <span class="tab">99967</span><span class="tab1">hear</span></p>
<p><b>hjkl</b> <span class="tab">88868</span><span class="tab1">here</span></p>

If you are using CSS, I would suggest the following:

p:first-letter { text-indent:1em; }

This will indent the first line like in traditional publications.

<span style="margin-left:64px"></span>

Consider it like this: one tab is equal to 64 pixels. So this is the space we can give by CSS.

There is a simple css for it:

white-space: pre;

It keeps the spaces that you add in the HTML rather than unifying them.

I use a list with no bullets to give the "tabbed" appearance. (It's what I sometimes do when using MS Word)

In the CSS file:

.tab {
    margin-top: 0px;
    margin-bottom: 0px;
    list-style-type: none;
}

And in the HTML file use unordered lists:

This is normal text
<ul class="tab">
    <li>This is indented text</li>
</ul>

The beauty of this solution is that you can make further indentations using nested lists.

A noob here talking, so if there are any errors, please comment.

we can use style="white-space:pre" like this:

<p>Text<tab style="white-space:pre">        </tab>: value</p>
<p>Text2<tab style="white-space:pre">   </tab>: value2</p>
<p>Text32<tab style="white-space:pre">  </tab>: value32</p>

the blank space inside is filled with tabs, the amount of tabs is depend on the text.

it will looks like this:

Text    : value
Text2   : value2
Text32  : value32

The ideal CSS code that should be used should be a combination of "display" and "min-width" properties...

display: inline-block;
min-width: 10em; // ...for example, depending on the uniform width to be achieved for the items [in a list], which is a common scenario where tab is often needed.

Well, if one needs a long whitespace in the beginning of one line only out of the whole paragraph, then this may be a solution:

<span style='display:inline-block;height:1em;width:4em;'>&nbsp;</span>

If that is too much to write or one needs such tabs in many places, then you can do this

<span class='tab'>&nbsp;</span>

Then include this into CSS:

span.tab {display:inline-block;height:1em;width:4em;}

we use custom space span class

<span class='space'></span>

Include space class in CSS.

.space 
{
   margin-left:45px;
}

Using CSS and best practice, the dynamic creation of nested, indented menus would be as follows:

Create a style for each nesting, such as indent1, indent2 etc, with each specifying its own left margin. Site structure should rarely go beyond three levels of nesting.
Use a static variable (integer) within the self-recursive function to track the recursion.
For each loop, append the loop number to the word indent, using server side scripting such as PHP or ASP, so that these menus are formatted appropriately by CSS.

Alternatively, loop through the static variable to add spacing using multiple   or <pre> tags, or other characters, as appropriate.

From testing the horizontal tab character, 	 I found that it doesn't work as a replacement to multiple   in the scenario I described. You may have different results.

This is a bit of an ugly solution but you could just do this

var tab = '&nbsp;&nbsp;&nbsp;&nbsp;';

And then use the tab variable in your strings.

Only "pre" tag:

<pre>Name:      Waleed Hasees
Age:        33y
Address:    Palestine / Jein</pre>

You can apply any CSS class on this tag.

I would simply recommend:

/* In your CSS code: */
pre
{
    display:inline;
}

<!-- And then, in your HTML code: -->

<pre>    This text comes after four spaces.</pre>
<span> Continue the line with other element without braking </span>

<head>
<style> t {color:#??????;letter-spacing:35px;} </style>
</head>

<t>.</t>

Make sure the color code matches the background the px is variable to desired length for the tab.

Then add your text after the < t >.< /t >

The period is used as a space holder and it is easier to type, but the '& #160;' can be used in place of the period also making it so the color coding is irrelative.

<head>
<style> t {letter-spacing:35px;} </style>
</head>

<t>&#160;</t>

This is useful mostly for displaying paragraphs of text though may come in useful in other portions of scripts.

참고URL : https://stackoverflow.com/questions/1571648/tab-space-instead-of-multiple-non-breaking-spaces-nbsp

'developer tip' 카테고리의 다른 글

JavaScript로 어떻게 리디렉션합니까? (0)	2020.09.28
동일한 기능을 트리거하는 jQuery 여러 이벤트 (0)	2020.09.28
1… N을 포함하는 배열을 만드는 방법 (0)	2020.09.28
제약 조건 변경을 애니메이션하려면 어떻게합니까? (0)	2020.09.28
이 활동에는 Theme.AppCompat 테마 (또는 하위 항목)를 사용해야합니다. (0)	2020.09.28

현재글여러 줄 바꿈하지 않는 공백 ( "nbsp") 대신 탭 공백?

optionbox

여러 줄 바꿈하지 않는 공백 ( "nbsp") 대신 탭 공백?

여러 줄 바꿈하지 않는 공백 ( "nbsp") 대신 탭 공백?

'developer tip' 카테고리의 다른 글

'developer tip'의 다른글

티스토리툴바

여러 줄 바꿈하지 않는 공백 ( "nbsp") 대신 탭 공백?

여러 줄 바꿈하지 않는 공백 ( "nbsp") 대신 탭 공백?

'developer tip' 카테고리의 다른 글

'developer tip'의 다른글

관련글

티스토리툴바