将CSS中的文本以“V”形居中
我有这张图。
这在 CSS 中可能吗？
现在我知道你可以使用text-align: center，我什至可以让每条线成为一个跨度并逐渐增加填充，但是有没有我不知道的属性，比如中心距中心，或类似的东西？
这感觉很明显，但我想不出一个合理的方法。
更新
问题是因为在图片中，文本趋向于向底部变短，就像字母 V 一样，所以 t 开始变宽并逐渐变窄。
我从未见过类似的事情，所以很好奇。
回答
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>
<div>
<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>