文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用css计算一首<pre>诗的行数？

问如何使用css计算一首<pre>诗的行数？
EN

Stack Overflow用户

提问于 2015-10-31 05:18:11

回答 3查看 197关注 0票数 3

我想在我的网页上显示Beowulf，完整的诗歌。到目前为止我的代码如下：

<head>
<title>Beowulf</title>
    <style type="text/css">

    body {padding: 10% 25%;}
    pre {font-family: "Times New Roman";  font-size: 100%;} 

</style>
</head> 

<body>
<h3>Beowulf</h3><br>

<pre>Now Beowulf bode in the burg of the Scyldings,
leader beloved, and long he ruled
in fame with all folk, since his father had gone
(...)
of furious flame. Nor far was that day
when father and son-in-law stood in feud
for warfare and hatred that woke again. (...)</pre>
</body>

现在如何获取每第五行的编号？我想把数字放在右边的最边上。

如果你尽可能地向我解释这个问题，我将不胜感激。我是一个简单性的朋友，我会优先考虑不应该比Beowulf诗歌本身更大的代码(如果你明白了的话！)，所以最好是css。

如果javascrpit是实现这个目标的唯一方法，我希望您能以最具教育性的方式来表达您的答案。我的编程技能是“中低档”，不幸的是，我在网上找不到任何具体的信息，甚至在w3schools上也找不到。感谢您的回答！

css

html

回答 3

Stack Overflow用户

发布于 2015-10-31 06:12:19

CSS设置元素或伪元素的样式，而不是文本行。所以你需要修改你的HTML或者使用JS。

例如，您可以获取文本，将其拆分成行，并将每个行包装在有序列表的列表项中。

，您可以使用CSS计数器将每行与其编号相关联，使用:nth-child选择第5N行，并使用伪元素插入计数器。要正确对齐数字，可以使用CSS表。

var old = document.getElementById('poem'),
    poem = document.createElement('ol');
poem.id = 'poem';
old.textContent.split('\n').forEach(function(line) {
  var li = document.createElement('li');
  li.textContent = line;
  poem.appendChild(li);
});
old.parentNode.replaceChild(poem, old);

body {padding: 10% 25%;}
#poem {
  font-family: "Times New Roman";
  display: table;
  padding: 0;
  counter-reset: line;
}
#poem > li {
  display: table-row;
  white-space: pre;
  counter-increment: line;
}
#poem > li:nth-child(5n+1):after {
  content: counter(line);
  display: table-cell;
  text-align: right;
  color: #aaa;
  cursor: default;
}

<h3>Beowulf</h3><br>
<pre id="poem">Now Beowulf bode in the burg of the Scyldings,
leader beloved, and long he ruled
in fame with all folk, since his father had gone
away from the world, till awoke an heir,
haughty Healfdene, who held through life,
sage and sturdy, the Scyldings glad.
Then, one after one, there woke to him,
to the chieftain of clansmen, children four:
Heorogar, then Hrothgar, then Halga brave;
and I heard that -- was -- 's queen,
the Heathoscylfing's helpmate dear.
To Hrothgar was given such glory of war,
such honor of combat, that all his kin
obeyed him gladly till great grew his band
of youthful comrades. It came in his mind
to bid his henchmen a hall uprear,
ia master mead-house, mightier far
than ever was seen by the sons of earth,
and within it, then, to old and young
he would all allot that the Lord had sent him,
save only the land and the lives of his men.
Wide, I heard, was the work commanded,
for many a tribe this mid-earth round,
to fashion the folkstead. It fell, as he ordered,
in rapid achievement that ready it stood there,
of halls the noblest: Heorot he named it
whose message had might in many a land.
Not reckless of promise, the rings he dealt,
treasure at banquet: there towered the hall,
high, gabled wide, the hot surge waiting
of furious flame. Nor far was that day
when father and son-in-law stood in feud
for warfare and hatred that woke again. (...)</pre>

票数 2

Stack Overflow用户

发布于 2015-10-31 05:57:09

这是你想要的吗？http://jsfiddle.net/g1xh9tjj/7/

JS：

$(function() {
    var text = $('pre').text(),
        textLines = text.split(/\n/g),
        index = 1,
        occurance = 5,
        paragraphNumber = occurance,
        output = '<div>1</div>';

    textLines.forEach(function(entry, arrayIndex) {
        if (arrayIndex > 0) {
            output += '<br />';
        }

        if (index === occurance) {
            output += '<div>'+paragraphNumber+'</div>'+entry;
            index = 1;
            paragraphNumber += occurance;
            return;
        } else {
            output += entry;
        }
        index++;
    });

    $('pre').html(output);
});

CSS：

pre {
    width: 400px;
}

pre div {
    float: right;
}

结果将是：

1Now Beowulf bode in the burg of the Scyldings,
leader beloved, and long he ruled
in fame with all folk, since his father had gone
away from the world, till awoke an heir,
5haughty Healfdene, who held through life,
sage and sturdy, the Scyldings glad.
Then, one after one, there woke to him,
to the chieftain of clansmen, children four:
Heorogar, then Hrothgar, then Halga brave;
10and I heard that -- was -- 's queen,
the Heathoscylfing's helpmate dear.
To Hrothgar was given such glory of war,
such honor of combat, that all his kin
obeyed him gladly till great grew his band
15of youthful comrades. It came in his mind
to bid his henchmen a hall uprear,
ia master mead-house, mightier far
than ever was seen by the sons of earth,
and within it, then, to old and young
20he would all allot that the Lord had sent him,
save only the land and the lives of his men.
Wide, I heard, was the work commanded,
for many a tribe this mid-earth round,
to fashion the folkstead. It fell, as he ordered,
25in rapid achievement that ready it stood there,
of halls the noblest: Heorot he named it
whose message had might in many a land.
Not reckless of promise, the rings he dealt,
treasure at banquet: there towered the hall,
30high, gabled wide, the hot surge waiting
of furious flame. Nor far was that day
when father and son-in-law stood in feud
for warfare and hatred that woke again. (...)

票数 0

Stack Overflow用户

发布于 2015-10-31 07:43:24

没有干净的CSS解决方案，只有近似和有限长度的文本有点笨拙的技巧。Itʼ的缺陷是显而易见的:没有自动计数器，只是用静态文本定位生成的内容：

    body {padding: 10% 25%;}
    pre {font-family: "Times New Roman";  font-size: 100%;} 

div {
	margin-left: -2em;
	padding-left: 2em; /* …create space for numbers */
	overflow: hidden; /* …and prevent them from leaking */
}
pre {
	position: relative;
}
pre:before {
	content: '\a\a\a\a 5\a\a\a\a 10\a\a\a\a 15\a\a\a\a 20'; /* and so on */
	position: absolute;
	top: 0;
	left: -2em;
	width: 2em;
	text-align: right;
	color: gold;
}

<div>
<pre>Now Beowulf bode in the burg of the Scyldings,
leader beloved, and long he ruled
in fame with all folk, since his father had gone
away from the world, till awoke an heir,
haughty Healfdene, who held through life,
sage and sturdy, the Scyldings glad.
Then, one after one, there woke to him,
to the chieftain of clansmen, children four:
Heorogar, then Hrothgar, then Halga brave;
and I heard that -- was -- 's queen,
the Heathoscylfing's helpmate dear.
To Hrothgar was given such glory of war,
such honor of combat, that all his kin
obeyed him gladly till great grew his band
of youthful comrades. It came in his mind (…)</pre></div>

我把数字放在左边，因为我忽略了关于“右边的极端边缘”的句子。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33445074

复制

相似问题

问如何使用css计算一首<pre>诗的行数？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用css计算一首<pre>诗的行数？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用css计算一首<pre>诗的行数？
EN