Can I set up tab stops in html5?

后端未结

关注

 6  1561

I would like to set up tab stops in html5 and be able to align text to them, just like in Word. For my application I can\'t use tables. Is there a way to do this? Do I have t

相关标签:

6条回答

悲&欢浪女

2021-02-13 03:44

I know the question said no tables, and the previous JS answer was unpopular, but someone should find this useful. It doesn't do true tab stops, but that's not possible even with CSS.

If you don't want to do a bunch of manual span or table tags, this JS automatically turns all elements of class "tabs" into a table when the page loads, using tab characters as a guide.

JS Fiddle: https://jsfiddle.net/s7m6zggp/7/

Edit: On second thought, maybe not the best approach. The regex is throwing my brain for a loop. But I'll keep the Fiddle up in case anyone wants to use it.

0 讨论(0)
发布评论:

提交评论
- 加载中...

执念已碎

2021-02-13 03:45

You can use the CSS property p { text-indent:50px; }

You can use css classes for each indent like

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

and do the HTML like this

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

Because you can only indent one line with this property there's another way to support multiline-indent:

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

And finally a fiddle.

0 讨论(0)

南笙

2021-02-13 03:45

Actually, I had a similar situation, and I did it quite simply. Use the <span> within the <p> property, and float it appropriately.

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>

fiddle: http://jsfiddle.net/Q3ruh/44/

0 讨论(0)

滥情空心

2021-02-13 03:49

Despite the assertions of the other posters to the contrary, there are valid reasons to want to do what the OP asked and many ways to do it using modern CSS (and more in the draft specification process as I write this). Here is just one way.

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

See sample results here: http://jsfiddle.net/Td285/

Another example, with overflow clipped: http://jsfiddle.net/KzhP8/

0 讨论(0)

青春惊慌失措

2021-02-13 04:05

The solution seems to be to use Javascript. Here is a simple example: 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>

0 讨论(0)

野的像风

2021-02-13 04:08

You can divide your data into <div>s using classes that give them all the same fixed width. That way, the columns will all line up.

<style>
  div.col-1 {
    width: 200px
  }
  div.col-2 {
    width: 500px
  }
</style>

First row is:
<div class="col-1">Some text here </div><div class="col-2">And here </div>
...
Second row is:
<div class="col-1">And here </div><div class="col-2">And here </div>

0 讨论(0)