我想在HTML5中设置制表位,并能够像在Word中一样将文本对齐到它们上面。由于我的应用程序不能使用表格,因此是否有方法可以做到这一点?我是否必须使用Javascript?
我想在HTML5中设置制表位,并能够像在Word中一样将文本对齐到它们上面。由于我的应用程序不能使用表格,因此是否有方法可以做到这一点?我是否必须使用Javascript?
尽管其他帖子的作者声称相反,但有合理的原因想要做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/
您可以使用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; }
最后一个是fiddle。
p { padding-left: 2in; }
。 - Pixelmonster 你必须接受HTML不像Word那样是一个程序,它没有像Word那样的功能。如果你写文本,标记它并点击加粗,Word会为你做一些像
<b>你的文本</b>`的事情。它只是以粗体文本的形式显示,就像在html中的结果一样。 - Pixelmonster您可以使用具有相同固定宽度的类将数据分成 <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>
<p>
属性内使用 <span>
,并适当地浮动它。
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 —</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>
<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>
...但也许对于其他人来说已经足够了...
解决方案似乎是使用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>
我知道问题中说不要使用表格,之前的JS答案也不受欢迎,但是有人应该会觉得这个有用。它不能做到真正的制表符,但即使使用CSS也不可能。
如果你不想手动添加大量的或标签,这个JS会在页面加载时自动将所有class为“tabs”的元素转换为表格,使用制表符作为指南。 JS Fiddle: https://jsfiddle.net/s7m6zggp/7/ 编辑:仔细想想,也许不是最好的方法。正则表达式让我感到困惑。但是我会保留Fiddle,以防有人想使用它。
position: absolute
来实现,但是溢出会带来很多麻烦。 - SLakswhite-space:pre
属性的元素中使用制表符。请参见fiddle。但是,对于tab-size
属性的支持仍然不稳定。 - Mr Lister