Html 如何在垂直文本之外添加行？

我必须为边界线创建一个新的包装器吗？我试图在text属性中添加边框，但无法正确对齐。[！[在此处输入图像说明][1][1]

您可以通过执行以下操作来实现此布局：

变换要转换的元素。然后处理所有内容的边距/填充，因为垂直元素被转换，并且它被带到文档的正常流程之外

给垂直元素一个底部边框，因为垂直边框实际上就是这个元素的底部

主要{ 显示器：flex； 对齐项目：居中； 证明内容：中心； 高度：100vh； 宽度：100vw； 背景：DarkOrchid； 颜色：白色； 字体系列：无衬线； } p{ 保证金：0； } .包装纸{ 显示器：flex； 调整项目：灵活启动； 调整内容：灵活启动； 最大宽度：600px； } 维特先生{ 显示器：flex； 变换：旋转-90度； 底部边框：2件纯白； 左：3rem； } .vert p{ 垫底：1毫米； } .项目{ 显示器：flex； 弯曲方向：立柱； 调整内容：灵活启动； 调整项目：灵活启动； 左边距：-3.25雷姆； 边缘顶部：-3rem； } .项目p{ 左：1rem； } .项目顶部p{ 垫底：1毫米； } .项目底部{ 边框顶部：2件纯白； } .项目底部p{ 垫面：1毫米； 字号：18px； } 1941年6月7日

短文

一些文本将显示在底部

你想放什么就放什么

---

您可以通过执行以下操作来实现此布局：

变换要转换的元素。然后处理所有内容的边距/填充，因为垂直元素被转换，并且它被带到文档的正常流程之外

给垂直元素一个底部边框，因为垂直边框实际上就是这个元素的底部

主要{ 显示器：flex； 对齐项目：居中； 证明内容：中心； 高度：100vh； 宽度：100vw； 背景：DarkOrchid； 颜色：白色； 字体系列：无衬线； } p{ 保证金：0； } .包装纸{ 显示器：flex； 调整项目：灵活启动； 调整内容：灵活启动； 最大宽度：600px； } 维特先生{ 显示器：flex； 变换：旋转-90度； 底部边框：2件纯白； 左：3rem； } .vert p{ 垫底：1毫米； } .项目{ 显示器：flex； 弯曲方向：立柱； 调整内容：灵活启动； 调整项目：灵活启动； 左边距：-3.25雷姆； 边缘顶部：-3rem； } .项目p{ 左：1rem； } .项目顶部p{ 垫底：1毫米； } .项目底部{ 边框顶部：2件纯白； } .项目底部p{ 垫面：1毫米； 字号：18px； } 1941年6月7日

短文

一些文本将显示在底部

你想放什么就放什么

---

我认为有一些方法。 你可以这样做

-html

---

我认为有一些方法。 你可以这样做

-html

---

这太好了！谢谢：很高兴我能帮忙！这太好了！谢谢：很高兴我能帮忙！

<div class="grid-container">
 
  <div class="date">22.Jun.2020</div>
  <div class="a">what you want to write1</div>  
  <div class="b">what you want to write2</div>
</div>

.date {
grid-area: date;
writing-mode: vertical-lr;
text-align: right;
 }
.a { grid-area: a; 
    border-bottom:solid 1px black;
    border-left:solid 1px black;
}

.b { 
    grid-area: b;
    border-left:solid 1px black;
}

.grid-container {
  display: grid;
  grid-template-areas:
  'date a a a a a a a a a a a'
  'date b b b b b b b b b b b';
}