2

<p>我正在尝试对显示元素时将生成的每一行进行自动编号 。

也许在 CSS 中使用计数器？我正在寻找 p:first-line 的内容，除了<p>元素的每一行

就像是：

p:each-line {
    counter-increment line_num;
}

p:each-line:before {
    counter(line_num) " " ACTUAL-LINE;
}

我可以用简单的 CSS 代码做到这一点吗？我还能如何做到这一点？

我有一个名为 message 的元素，我事先不知道使用该元素样式将格式化多少行实际文本。例如，如果我更改最大宽度并且强制更多/更少行，我希望它自动正确编号元素中的实际行。

/* set up the speech bubbles */
p.message {
    position:relative;
    padding:5px 10px;
    border:2px solid rgb(74,77,82);
    border:2px solid rgba(74,77,82,.5);
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    max-width: 70%;
}
4

1 回答 1

1

这样的任务对于 CSS 来说有点难以处理。在javascript中并不太难。

这听起来像是一个不错的小分心，所以我在 jsfiddle 中玩了一下。也许这会有所帮助，即使它不是纯 css 并且使用一些 jquery。

http://jsfiddle.net/rSFUB/2/

请注意，我将文本包装<p>在一个 div 中，并在绝对位置中添加了一个行号 div。javascript是：

$(document).ready(function () {
    $(".message").each(function () {
        var self = $(this);
        var numbering = self.find(".lineNumbering").first();
        var messageText = self.find("p").first();
        var lineHeight = numbering.text("...").height();
        var lines = messageText.height() / lineHeight;
        var lineNumberingHtml = "";
        for(var i = 1; i <= lines; i++) {
            lineNumberingHtml = "" + lineNumberingHtml + i + "<br />";
        }

        numbering.html(lineNumberingHtml);
    });
});

我在 IE10、Chrome 和 Firefox 中进行了测试。不同版本中此代码之间的唯一区别是.lineNumberdiv 上的填充，以便它与文本对齐。注意这里假定行号 div 文本和段落是相同的line-height。

于 2013-09-17T22:32:55.483 回答