css - 如何将样式(使用 CSS) "20201231123456"设置为 "20201231-123456"？

Question

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

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

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

奖励: 更复杂的是，这会与其他东西一起进入一个长表 - 一些版本标识符是 5 位数字而不是日期时间，但它们显示在相同类型的 HTML 元素。 HTML 元素的样式能否同时适应这两种格式，使“54321”保持原样，但“20201231123456”仍变为“20201231-123456”？

Answer 1

这里有一个纯 CSS 解决方案，它适用于长(14 个字符)和短值(小于 14 个字符):

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 单元，这将允许您以 orderly 的方式稍微移动字符。为容器设置一个固定的宽度，然后将它们隔开，使它们开箱即用。最后，使用 text-shadow 一次转换一个字符。

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

但你想用破折号，为此，使用像 ::before 或 ::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>