Question

有没有一种很好的方法来实现以下功能，而无需任何额外的标记？但是可以使用JavaScript。

Stepped text

有什么想法吗？

谢谢！

修改

我的加价类似于：

<div style="width: 400px;">
  <p>Text text text Text text text Text text text</p>
</div>

Answer 1

对于给定的文本元素，使用文本范围查找第一行的结尾，然后将剩余的文本包装在子div中。递归重复，使用子div进行下一次迭代。

这适用于跨浏览器：http://jsfiddle.net/gilly3/CmguZ/4/

感谢textRange.moveToPoint(x, y)：

，这在IE中最简单

function indent(div) {
    var rng = document.body.createTextRange();
    rng.moveToElementText(div);
    var x = rng.getBoundingClientRect().right;
    rng.collapse();
    var rect = rng.getBoundingClientRect();
    var y = rect.bottom;
    rng.moveToPoint(x - 1, y - 1);
    rng.moveEnd("textedit");
    var html = "<div class=\"indent\">" + rng.text + "</div>";
    rng.pasteHTML(html);
    div = $(".indent", div)[0];
    rng.moveToElementText(div);
    var pos = rng.getBoundingClientRect();
    if (pos.bottom > rect.bottom) {
        indent(div);
    }
}

对于其他浏览器，您必须迭代文本以查找换行的位置：

function indent(div) {
    var rng = document.createRange();
    rng.selectNodeContents(div);
    var len = rng.toString().length;
    var start = rng.toString().search(/.\s/);
    if (start < 0) return;
    var txt = div.childNodes[0];
    rng.setEnd(txt, start);
    var startRect = rng.getBoundingClientRect();
    var rect;
    for (var i = start + 1; i < len; i++) {
        rng.setEnd(txt, i);
        rect = rng.getBoundingClientRect();
        if (rect.bottom > startRect.bottom) {
            rng.setStart(txt, i-1);
            rng.setEnd(txt, len);
            div = document.createElement("div");
            div.className = "indent";
            rng.surroundContents(div);
            indent(div);
            break;
        }
    }
}

Answer 2

在jQuery中，你会做这样的事情：

var text = $('p').hide().html().split(' T');
text[1] = 'T' + text[1];
text[2] = 'T' + text[2];

$(text).each(function(index)
{
    var elem = $('<span>' + this + '</span>');
    elem.css({ position: relative; left: (index * 10) + 'px' });
    $('p').after(elem);
});

应该在段落元素之后插入每个跨度（包含“文本文本文本”），第二个和第三个元素分别偏移10和20像素（根据需要改变数学）。它有点脏，但无论如何。

只需简单地更改标记和样式，您就可以获得更好，更强大的功能。

CSS - 做“'步骤'文本的好方法？

2 个答案: