17

Word と同じように、html5 でタブ ストップを設定し、テキストを配置できるようにしたいと考えています。私のアプリケーションでは、テーブルを使用できません。これを行う方法はありますか？Javascript を使用する必要がありますか?

4

7 に答える 7

17

反対の他のポスターの主張にもかかわらず、OPが要求したことを実行したい正当な理由と、最新のCSSを使用してそれを実行する多くの方法があります（これを書いているドラフト仕様プロセスではさらに多くの方法があります）。ここでは 1 つの方法を示します。 

<!DOCTYPE HTML>
<html>
 <head>
  <title>Tabs with css</title>
  <style>
  {body: font-family: arial;}
  div.row span{position: absolute;}
  div.row span:nth-child(1){left: 0px;}
  div.row span:nth-child(2){left: 250px;}
  div.row span:nth-child(3){left: 500px;}
  </style>
 </head>
 <body>
  <div class="row"><span>first row data before first tab</span><span>data left aligned with first tab</span><span>data aligned with second tab</span></div><br>
  <div class="row"><span>second row data before first tab</span><span>data left aligned with first tab</span><span>data aligned with second tab</span></div><br>
  <div class="row"><span>third row data before first tab</span><span>data left aligned with first tab</span><span>data aligned with second tab</span></div><br>
  <div class="row"><span>fourth row data before first tab</span><span>data left aligned with first tab</span><span>data aligned with second tab</span></div><br>
  <div class="row"><span>fifth row data before first tab</span><span>data left aligned with first tab</span><span>data aligned with second tab</span></div><br>
 </body>
</html>

ここでサンプル結果を参照してください: http://jsfiddle.net/Td285/

オーバーフローがクリップされた別の例: http://jsfiddle.net/KzhP8/

于 2014-01-25T20:46:44.170 に答える
3

CSSプロパティを使用できます p { text-indent:50px; }

次のように、インデントごとにcssクラスを使用できます

h1 { text-indent: 10px; }
h2 { text-indent: 14px; }
h3 { text-indent: 18px; }
p { text-indent: 20px; }
p.notice { text-indent: 24px; }

このようにHTMLを実行します

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>Text 1</p>
<p class="notice">Text 2</p>

このプロパティでは 1 行しかインデントできないため、複数行インデントをサポートする別の方法があります。

h1 { padding-left: 10px; }
h2 { padding-left: 14px; }
h3 { padding-left: 18px; }
p { padding-left: 20px; }
p.notice { padding-left: 24px; }

そして最後にフィドル。

于 2013-08-22T00:38:54.967 に答える
1

実際、私も似たような状況に陥りました。<span>プロパティ内でを使用し、<p>適切にフロートします。

CSS:

p.main-text { /* these properties don't matter much */    
    margin: 0;    
    text-indent: 0;    
    font-size: 1em;    
    line-height: 1.2;    
    text-align:justify;    
}    
span.column-width { /*this defines the width of the first column */    
    width: 33%;    
    float: left;    
}

html:

<p class="main-text"><span class="column-width">Diary Date: 2016 April 01 &mdash;</span>This is the text of the diary entry. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla pharetra metus id blandit. Integer molestie sed mauris eget gravida. Fusce aliquam diam eu arcu imperdiet vehicula. Fusce fermentum molestie aliquet. Phasellus sodales, mauris sed ornare accumsan, dolor ligula vehicula magna, vel pulvinar sapien lorem condimentum purus. Etiam vulputate commodo mattis. Etiam non tincidunt leo, eget ultricies mauris. Fusce rhoncus ultrices purus. Nunc id scelerisque nisi, quis congue turpis.</p>

フィドル: http://jsfiddle.net/Q3ruh/44/

于 2016-04-29T08:34:43.297 に答える
0

解決策は、Javascript を使用することのようです。簡単な例を次に示します: http://jsfiddle.net/A6z5D/1 :

<p>Hello bla bla bla<span id="tab1"></span>world</p>
<script>
function do_tab(id, tabstops)
{
    var tab1 = document.getElementById(id);
    var rect = tab1.getBoundingClientRect();
    console.log(rect.top, rect.right, rect.bottom, rect.left);
    var tabstop = 0;
    for (var i = 0; i < tabstops.length - 1; ++i)
    {
        if (rect.left >= tabstops[i] && rect.left < tabstops[i+1]) 
        {
            tabstop = tabstops[i+1];
        }
    }
    if (tabstop > 0)
    {
        var width = tabstop - rect.left;
        tab1.style.display = "inline-block";
        tab1.style.width = width + "px";
    }
}
do_tab("tab1", new Array(0, 100, 200, 300, 400));
</script>
于 2013-08-22T13:59:22.577 に答える
0

質問にテーブルがないと言われたことは知っていますが、以前のJSの回答は人気がありませんでしたが、誰かがこれを役立つと思うはずです. 真のタブ ストップは行いませんが、CSS を使用してもそれは不可能です。

span大量のマニュアルやタグを作成したくない場合table、この JS は、ページが読み込まれるときに、タブ文字をガイドとして使用して、クラス「タブ」のすべての要素を自動的にテーブルに変換します。

JS フィドル: https://jsfiddle.net/s7m6zggp/7/

編集：考え直して、最善のアプローチではないかもしれません。正規表現はループのために私の脳を投げています。しかし、誰かがそれを使いたい場合に備えて、私は Fiddle を維持します。

于 2016-08-26T08:37:49.543 に答える