JSFiddle - React, Tailwind, and code Playground

by Liu ChangFeng

HTML

<div class="wrap">
  <span class="text" style="vertical-align:top;">top</span>
  <span class="text" style="vertical-align:text-top;">text-top</span>
  <span class="text" style="vertical-align:super;">super</span>
  <span class="text" style="vertical-align:middle;">middle</span>
  <span class="text" style="vertical-align:baseline;">baseline</span>
  <span class="text" style="vertical-align:sub;">sub</span>
  <span class="text" style="vertical-align:text-bottom;">text-bottom</span>
  <span class="text" style="vertical-align:bottom;">bottom</span>
</div>
<br/>
<div style="font-size:18px;">
  <div>top: 元素及其后代的顶端与整行的顶端对齐。</div>
  <div>text-top: 元素顶端与父元素字体的顶端对齐。</div>
  <div>super: 元素基线与父元素的上标基线对齐。</div>
  <div>middle: 元素中垂线与父元素的基线加上小写x一半的高度值对齐。</div>
  <div>baseline: 元素基线与父元素的基线对齐。</div>
  <div>sub: 元素基线与父元素的下标基线对齐。</div>
  <div>text-bottom: 元素底端与父元素字体的底端对齐。</div>
  <div>bottom: 元素及其后代的底端与整行的底端对齐。</div>
  <div>
    length: 元素基线超过父元素的基线指定高度。可以取负值。
  </div>
  <div>
    percentage: 同 length , 百分比相对于 line-height 。
  </div>
  <div>
    如果元素没有基线baseline，则以它的外边距的下边缘为基线。
  </div>
</div>

CSS

body {
  width:3700px;
}

.wrap {
  white-space: nowrap;
  background-color: #736f60;
  font-size: 150px;
  color: #FFF;
}

.line {
  display: inline-block;
  border-top: dotted 1px;
  width: 100%;
  line-height: 1px;
  text-align: right;
  margin-right: -100%;
  position: relative;
  font-size: 18px;
  letter-spacing: 1px;
  color: #0d2744;
}

.text {
  display: inline-block;
  background: #C00;
}

JavaScript

function addLines(dom) {
  var lines = document.createElement('div')
  lines.style.display = 'inline';
  lines.innerHTML = [
    '<div class="line" style="border-color:#F00;vertical-align:top;">top</div>',
    '<div class="line" style="border-color:#00f;vertical-align:sub">sub</div>',
    '<div class="line" style="border-color:#f47920;vertical-align:super">super</div>',
    '<div class="line" style="border-color:#0ff;vertical-align:text-top">text-top</div>',
    '<div class="line" style="border-color:#ef5b9c;vertical-align:middle">middle</div>',
    '<div class="line" style="border-color:#00ae9d;vertical-align:baseline">baseline</div>',
    '<div class="line" style="border-color:#7fb80e;vertical-align:text-bottom">text-bottom</div>',
    '<div class="line" style="border-color:#F00;vertical-align:bottom">bottom</div>'
  ].join('')
  dom.insertBefore(lines, dom.firstChild)
}

var sections = document.querySelectorAll('.wrap')
for (var i = 0; i < sections.length; i++) {
  addLines(sections[i])
}