Question

我正在创建一个字母跟踪/书写工作表布局。它不会正确溢出。

我尝试用更少的字母来复制代码示例，以免溢出。问题是某些字母比其他字母长，因此它们会继续溢出。

我希望多余的字母向下移动并重新创建顶部/中部/底部边框。

.wrap {
  position: relative;
  width: 500px
}

.top {
  border-top: 2px solid #000;
  height: 30px
}

.center {
  border-top: 1px dashed #000;
  height: 30px
}

.letter {
  position: absolute;
  top: 11px;
  font-size: 84px;
  padding-bottom: 30px
}

<div class="wrap">
  <div class="top">
  </div>
  <div class="center">
  </div>
  <div class="top">
    <div class="letter">A B C D E O P Q R S T U V W X Y Zs</div>

  </div>
</div>

已编辑以添加代码段

Answer 1

这取决于font-family，因为每个高度和宽度都是唯一的。如果font-family是serif或sans-serif类型，则每个字母的长度都会变化，但是如果是等宽字体类型，则每个字母的所有长度都会一致。

以下演示使用text-decoration: overline underline和带有text-decoration: line-through dashed的覆盖图。有两个示例：

字体家族：Arial （san-serif）
字体家族：Consolas （等宽字体）

:root {
  font: 500 9vw/1.2 Arial;
}

.alphabet {
  position: relative;
  height: 7rem;
  max-width: 96%;
  margin: 5vh 2vw;
}

.text {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 1rem;
  font-stretch: ultra-expanded
}

.line {
  display: inline-block;
  position: absolute;
  background: transparent;
}

.edges {
  z-index: 0;
  top: .3rem;
  left: 0;
  text-decoration: overline underline rgba(255, 255, 128, 0.7);
}

.edges del {
  color: transparent;
}

.middle {
  z-index: 1;
  top: 0;
  left: 0;
  word-break: break-word;
  color: transparent;
  text-decoration: line-through dashed rgba(0, 0, 0, 0.3);
}

h4 {
  margin: 0 0 -3vw 0
}

.consolas {
  font-family: Consolas;
  font-size: 1rem;
  line-height: 1.2;
}

.consolas h4 {
  margin: 0 0 -2vh 0;
  font-size: 1.1rem
}

.consolas .text {
  height: 0.5rem;
}

.consolas .edges {
  top: 0.2rem
}

<figure class='alphabet'>
  <h4>Arial</h4>
  <figcaption class='text'>
    <mark class='line edges'>Aa&emsp14;Bb&emsp14;Cc&emsp14;Dd&emsp14;Ee&emsp14;Ff&emsp14;Gg&emsp14;Hh&emsp14;Ii&emsp14;Jj&emsp14;Kk&emsp14;Ll&emsp14;Mm&emsp14;Nn&emsp14;Oo&emsp14;Pp&emsp14;Qq&emsp14;Rr&emsp14;Ss&emsp14;Tt&emsp14;Uu&emsp14;Vv&emsp14;Ww&emsp14;Xx&emsp14;Yy&emsp14;Zz<del>XXXx</del></mark>
    <mark class='line middle'>Aa&emsp14;Bb&emsp14;Cc&emsp14;Dd&emsp14;Ee&emsp14;Ff&emsp14;Gg&emsp14;Hh&emsp14;Ii&emsp14;Jj&emsp14;Kk&emsp14;Ll&emsp14;Mm&emsp14;Nn&emsp14;Oo&emsp14;Pp&emsp14;Qq&emsp14;Rr&emsp14;Ss&emsp14;Tt&emsp14;Uu&emsp14;Vv&emsp14;Ww&emsp14;Xx&emsp14;Yy&emsp14;ZzXXXx</mark>
  </figcaption>
</figure>

<figure class='alphabet consolas'>
  <h4>Consolas</h4>
  <figcaption class='text'>
    <mark class='line edges'>Aa&emsp14;Bb&emsp14;Cc&emsp14;Dd&emsp14;Ee&emsp14;Ff&emsp14;Gg&emsp14;Hh&emsp14;Ii&emsp14;Jj&emsp14;Kk&emsp14;Ll&emsp14;Mm&emsp14;Nn&emsp14;Oo&emsp14;Pp&emsp14;Qq&emsp14;Rr&emsp14;Ss&emsp14;Tt&emsp14;Uu&emsp14;Vv&emsp14;Ww&emsp14;Xx&emsp14;Yy&emsp14;Zz<del>XXXx</del></mark>
    <mark class='line middle'>Aa&emsp14;Bb&emsp14;Cc&emsp14;Dd&emsp14;Ee&emsp14;Ff&emsp14;Gg&emsp14;Hh&emsp14;Ii&emsp14;Jj&emsp14;Kk&emsp14;Ll&emsp14;Mm&emsp14;Nn&emsp14;Oo&emsp14;Pp&emsp14;Qq&emsp14;Rr&emsp14;Ss&emsp14;Tt&emsp14;Uu&emsp14;Vv&emsp14;Ww&emsp14;Xx&emsp14;Yy&emsp14;ZzXXXx</mark>
  </figcaption>
</figure>

创建字母跟踪布局无法正确进行

1 个答案: