个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
诗的行数？
24
4
我想在我的网页上显示 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>
现在如何对每五行进行编号？我想将数字放在右侧的最边缘。
如果您尝试尽可能地向我解释这个问题，我将不胜感激。我是一个简单的 friend ，我会优先选择不应该比 Beowulf 诗本身大的代码(如果你明白了!)，所以最好是 css。
如果 javascrpit 是到达那里的唯一途径，我会恳请您尽可能以最具教学意义的方式来制定您的答案。我的编程技能是“中低级”，不幸的是我没有在网上找到任何具体信息，甚至在 w3schools 上也没有。感谢您的回答!
最佳答案
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>关于css - 如何使用 css 计算 <pre> 诗的行数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33445074/
24
4
0
一些背景: 我正在从事的项目使用 python-ldap图书馆。由于我们是一个混合操作系统开发团队(一些使用 Linux，一些使用 macOS 和一些 Windows)，我试图让项目在所有环境中构建。
我是一名优秀的程序员,十分优秀！