如何在垂直文本之外添加线条？

Question

我必须为边界线创建一个新的包装器吗？我试图在文本属性中添加边界线，但我无法正确对齐它。[![在此处输入图片描述][1]][1]

Answer 1

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

变换你想要的元素。然后弄乱一切的边距/填充，因为垂直元素被转换并且它被带到文档的正常流之外。

给垂直元素一个 border-bottom（因为“垂直”边框实际上是这个元素的底部）。

main {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  background: DarkOrchid;
  color: white;
  font-family: sans-serif;
}

p {
  margin: 0; 
}

.wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 600px;
}

.vert {
  display: flex;
  transform: rotate(-90deg);
  border-bottom: 2px solid white;
  padding-left: 3rem;
}

.vert p {
  padding-bottom: 1rem;
}

.items {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: -3.25rem;
  margin-top: -3rem;
}

.items p {
  padding-left: 1rem;
}

.item-top p {
  padding-bottom: 1rem;
}

.item-bottom {
  border-top: 2px solid white;
}

.item-bottom p {
  padding-top: 1rem;
  font-size: 18px;
}

<main>
  <div class="wrapper">
    <div class="vert">
    <p>June 7, 1941</p>
  </div>
  <div class="items">
    <div class="item item-top">
      <p>Short text</p>
    </div>
    <div class="item item-bottom">
    <p>Some text that will appear on the bottom.</p>
    <p>You can put whatever you want here.</p>
    </div>
  </div>
  </div>
</main>

Answer 2

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

-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>

-css

.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';
}

如何在垂直文本之外添加线条？

How to add lines besides a vertical text?

html

css

border

sass