我可以在html5中设置制表位吗? [英] Can I set up tab stops in html5?

问题描述

我想在html5中设置制表位，并且能够像在Word中那样将文本对齐.对于我的应用程序，我不能使用表.有没有办法做到这一点?我必须使用Javascript吗?

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 to use Javascript?

推荐答案

解决方案似乎是使用Javascript.这是一个简单的示例: http://jsfiddle.net/A6z5D/1 :

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>

这篇关于我可以在html5中设置制表位吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！