我可以在html5中设置制表位吗？

问题描述 投票：0回答：7

我想在 html5 中设置制表位并能够将文本与其对齐，就像在 Word 中一样。 对于我的应用程序，我不能使用表格。 有办法做到这一点吗？ 我必须使用 JavaScript 吗？

html
7个回答
18
投票

尽管其他发帖者的主张相反，但有充分的理由想要按照OP的要求去做，并且有很多方法可以使用现代CSS来做到这一点（以及我撰写本文时的草案规范过程中的更多内容）。 这只是一种方法。 

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

2
投票

您可以使用 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>

因为您只能使用此属性缩进一行，所以还有另一种方法来支持多行缩进：

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

最后是一个小提琴。

1
投票

您可以使用为数据提供相同固定宽度的类将数据划分为 

<div>
。这样，列就会全部对齐。 

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

1
投票

简单地认为我最近可能需要类似的东西，因此使用“当前接受的答案”作为基础模拟了以下内容。 原始答案看起来对于小文本值可能没问题（例如，对齐值列表），但是如果您调整大小和/或将包裹在内联块区域内，则较长的文本不会回流。 <html> <head> <style type="text/css"> /* decorative styles for demo only */ html, body { margin: 0; padding: 0; } p { background-color: lightyellow; } div#ruler { border-bottom: 1px solid gray; overflow: hidden; white-space: nowrap; } div#ruler>span { display: inline-block; text-align: right; font-size: xx-small; color: gray; border-right: 1px solid gray; overflow: hidden; box-sizing: border-box; } span.tabbed, br.tab { background-color: lightcyan; } /* seems to be needed if text-indent used for spacing; no harm for padding/margin... */ span.tabbed::before { display: inline-block; content: ''; } /* doesn't work universally, was hoping to use for better semantics -- maybe revisit... */ br.tab { content: ''; display: inline; } </style> <script type="text/javascript"> // for rate-limiting resize/scroll event firing function debounce(func, wait, immediate) { // ref: https://davidwalsh.name/javascript-debounce-function var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }; // decorative; used for drawing a ruler at the top of the page only function applyTabRuler(pid, tabstops) { var parent = document.getElementById(pid); if (!parent) { parent = document.createElement('div'); document.body.insertBefore(parent, document.body.firstChild); } for (var s = 1, slen = tabstops.length; s < slen; s++) { var width = tabstops[s] - tabstops[s - 1]; var tab = document.createElement('span'); tab.appendChild(document.createTextNode(s)); tab.style.width = tab.style.maxWidth = tab.style.minWidth = '' + width + 'px'; parent.appendChild(tab); } } // call this to align elements matching className to pixel-posiitoned tabstops // tabstops should be an array of monotonically-increasing pixel positions function applyTabStops(className, tabstops) { // try also paddingLeft or textIndent (may need a ::before{display:inline-block}) var styleProp = 'marginLeft'; var tabbed = document.getElementsByClassName(className); var bodyRect = document.body.getBoundingClientRect(); var inlineMarker = document.createElement('span'); for (var t = 0, tlen = tabbed.length; t < tlen; t++) { tabbed[t].style[styleProp] = '0px'; tabbed[t].insertBefore(inlineMarker, tabbed[t].firstChild); var tabRect = inlineMarker.getBoundingClientRect(); var tabstop = 0; for (var s = 0, slen = tabstops.length - 1; s < slen; s++) { if (tabRect.left >= tabstops[s] && tabRect.left < tabstops[s + 1]) { tabstop = tabstops[s + 1]; break; } } if (tabstop > 0) { var width = tabstop - tabRect.left + bodyRect.left; tabbed[t].style[styleProp] = '' + width + 'px'; } } if (inlineMarker && inlineMarker.parentNode) { inlineMarker.parentNode.removeChild(inlineMarker); } } </script> </head> <body> <div> <div id="ruler"></div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc cursus congue purus vel blandit. <span class="tabbed">Cras non justo vitae orci vehicula tincidunt. Aliquam convallis cursus nisi, eu varius odio rutrum ut. Morbi id accumsan velit. Proin commodo consequat urna aliquam imperdiet.</span> Curabitur laoreet est ut venenatis suscipit. Sed id vulputate enim. <span class="tabbed">Etiam libero massa, suscipit eget interdum non, vulputate nec eros. In hac habitasse platea dictumst.</span> Ut vestibulum venenatis ante, at vestibulum ex varius eu. Nam lorem turpis, euismod a aliquam vel, placerat iaculis mauris. Integer et eros turpis. Ut quis volutpat urna, eu fermentum magna. Phasellus nunc turpis, accumsan nec velit eget, pretium semper urna. </p> <p> <span class="tabbed">Suspendisse nibh nibh, ultrices vitae odio aliquam, facilisis euismod dui.</span> Quisque dignissim felis in luctus faucibus. Sed at finibus leo. Suspendisse potenti. Nullam commodo eleifend porttitor. Nam id dolor pretium felis rutrum posuere. Vivamus maximus lorem mauris, sit amet pulvinar diam luctus nec. Praesent ac euismod lectus. <span class="tabbed">Fusce tempor metus eget posuere vehicula.</span> Vestibulum porttitor vitae magna non consectetur. Ut nibh massa, molestie in est nec, pellentesque rutrum purus. Nam sagittis felis gravida odio blandit, in tincidunt velit ornare. Etiam congue tellus eros, at molestie risus luctus iaculis. Nulla et vehicula enim. Integer pellentesque nunc augue, in scelerisque magna eleifend id. Etiam ut dapibus nulla, in tincidunt justo. </p> <p>Sed iaculis enim fermentum arcu gravida tempus. <span class="tabbed">Sed ipsum ante, scelerisque eget tellus eget, sagittis pellentesque odio.</span></p> <p>Curabitur vestibulum felis non arcu cursus vehicula. <span class="tabbed">Nunc blandit neque et imperdiet efficitur.</span></p> <p> Quisque malesuada cursus porttitor. <span class="tabbed">Vestibulum porttitor libero massa, quis lacinia elit tempus vel.</span> <br/> Suspendisse laoreet sapien nec nulla placerat, vel dapibus nulla auctor. <span class="tabbed">Phasellus ut dictum dolor, sit amet feugiat tellus.</span> </p> </div> <script type="text/javascript"> // random tabstops, for testing... var trun = 0; var tabstops = []; for (var t = 0, tlen = 50; t < tlen; t++) { tabstops[t] = trun; trun += ((200 * Math.random()) + 20); } // fixed tabstops... //var tabstops = [0, 200, 300, 450, 500, 600, 700, 800, 900, 1000]; console.log(tabstops); applyTabRuler("ruler", tabstops); applyTabStops("tabbed", tabstops); var reapplyTabStops = debounce(function() { applyTabStops("tabbed", tabstops); }, 100); window.addEventListener('resize', reapplyTabStops); window.addEventListener('scroll', reapplyTabStops); </script> </body> </html> 

（在 FF94、Edge95、IE11 中进行冒烟测试）

最终设法消除了要求（毕竟，在

表格

中呈现表格数据是可以的），但我想我会在这里提供它，以防它对其他人有帮助。 它并不完美：

有几个地方没有完全对齐（我猜可能是边距/填充问题）
  • 在调整大小时，回流不是
    • 很好
  • 没有为从右到左的语言做任何努力（margin-inline
    • 可能就足够了）
  • 我更喜欢将选项卡定义为中断（即
    <br>
    • ）而不是包含选项卡内容的
  • <span>
    

    仅左对齐：无法将右对齐、居中或小数点与“制表位”对齐，这是 MS Word 制表位的一个重要功能
    

    • 

  • ...但也许其他人能够越过线路就足够了...
    • 


    Example render


解决方案似乎是使用Javascript。  这是一个简单的例子：

    

    
    
    

    

        

            

                

                    
0
投票

                    

                

            

        

        
：


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

    


我知道这个问题说没有表格，并且之前的 JS 答案不受欢迎，但应该有人会发现这很有用。它不执行真正的制表位，但即使使用 CSS 也是不可能的。

    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        
如果您不想手动执行一堆 
span
 或 
table
 标签，则此 JS 会在页面加载时自动将“tabs”类的所有元素转换为表格，并使用制表符字符作为指导。



JS 小提琴：
https://jsfiddle.net/s7m6zggp/7/


编辑：再想一想，也许不是最好的方法。正则表达式让我绞尽脑汁。但我会保留小提琴以防有人想使用它。
    

	



    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.