如何将样式（使用 CSS）“20201231123456”变成“20201231-123456”？

Question

“20201231123456”是版本标识符，在页面元素中显示为静态文本。视觉上解析相当困难，我想知道是否可以使用纯 CSS 将其拆分为日期和时间组件来显示；也就是说，无需修改 HTML 源代码中的实际值？

我试图搜索，但要么我从 2011 年得到的结果说这是不可能的，但有人正在研究它，要么结果表明将每个角色都放在自己的范围内。

这个看似简单的想法有现代解决方案吗？

奖励：更复杂的是，这与其他内容一起放入了一个长表中——一些版本标识符是 5 位数字而不是日期时间，但它们显示在相同类型的 HTML 元素中。HTML 元素的样式是否可以同时容纳这两种格式，以便“54321”保持原样，但“20201231123456”仍然变为“20201231-123456”？

Answer 1

这里有一个适用于长值（14 个字符）和短值（少于 14 个字符）的纯 CSS 解决方案：

div {
  font-family: monospace, monospace;
  width: 15ch;
  overflow: hidden;
  letter-spacing: 20ch;
  text-shadow: 
    /* the date */
    -20ch 0, -40ch 0, -60ch 0, -80ch 0, -100ch 0, -120ch 0, -140ch 0,
    /* the time */
    -159ch 0, -179ch 0, -199ch 0, -219ch 0, -239ch 0, -259ch 0;
}

<div>20201231123456</div>

<div>12345</div>

这个想法是使用等宽字体（所有字符的宽度相同）和ch允许您以有序的方式稍微移动字符的单位。为容器设置一个固定的宽度，然后将它们隔开足够的空间，以便它们开箱即用。最后，使用一次text-shadow投射一个字符。

我知道，这可能很乏味（而且有点傻），但它确实有效 :)

但是你想要一个破折号，为此，使用像::beforeor这样的伪元素::after：

div {
  font-family: monospace, monospace;
  width: 19ch;
  overflow: hidden;
  position: relative;
  letter-spacing: 20ch;
  text-shadow: 
    /* the date */
    -20ch 0, -40ch 0, -60ch 0, -80ch 0, -100ch 0, -120ch 0, -140ch 0,
    /* the time */
    -159ch 0, -179ch 0, -199ch 0, -219ch 0, -239ch 0, -259ch 0;
}

div::before {
  content: "-";
  position: absolute;
  left: 8ch;
}

<div>20201231123456</div>

现在是顶部的樱桃：使用框的伪元素绘制线条和冒号以完全格式化日期。尽管它不适用于较小的日期，但仅适用于较长的日期：

div {
  font-family: monospace, monospace;
  width: 19ch;
  overflow: hidden;
  position: relative;
  letter-spacing: 20ch;
  text-shadow: 
    /* the date */
    -20ch 0, -40ch 0, -60ch 0, -79ch 0, -99ch 0, -118ch 0, -138ch 0,
    /* the time */
    -157ch 0, -177ch 0, -196ch 0, -216ch 0, -235ch 0, -255ch 0;
}

div::before {
  content: "-:";
  position: absolute;
  text-shadow: 3ch 0, -12ch 0, -9ch 0;
  left: 4ch;
}

<div>20201231123456</div>