html - 在“V”形内将 CSS 中的文本居中

Question

我有这张照片。

这在 CSS 中可能吗？

现在我知道你可以使用text-align: center，我什至可以让每一行成为一个跨度并逐渐增加填充，但是有没有我不知道的属性，比如从中心到中心，或者类似的东西？

这感觉很明显，但我就是想不出一个合理的方法。

更新

问题是因为在图片中，文本趋向于在底部变短，就像字母 V 一样，所以 t 从宽开始逐渐变窄。

我从来没有见过类似的事情，所以很好奇。

标签： htmlcss

Answer 1

shape-outside 可以做到：

.wrapper {
  display:flex; /* this is needed for the percentage height */
}

.box {
  font-size: 25px;
  text-align:justify;
}

.box > div,
.box::before{
  height:150%; /* should be at least 100% but we consider bigger to avoid overflow */
  width:100px; /* adjust this */
}
  
.box > div {
  float:right;
  shape-outside:linear-gradient(to bottom right,#0000 50%,#000 0);
}
.box::before {
  content:"";
  float:left;
  shape-outside:linear-gradient(to bottom left,#0000 50%,#000 0);
}

/* the below is not need, it's only to illustrate the shape 
   uncomment it to see what is happening
.box > div {
  background:linear-gradient(to bottom right,#0000 50%,red 0);
}
.box::before {
  background:linear-gradient(to bottom left,#0000 50%,green 0);
}
*/

<div class="wrapper">
  <div class="box">
    <div></div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pretium lacus ipsum, at placerat nunc sollicitudin scelerisque. Donec vulputate ex odio, et facilisis nisi tristique et. Maecenas tortor nisi, euismod et tellus sit amet, tincidunt congue
    eros. Nam et viverra magna, id ultricies augue.
  </div>
</div>