gpt4 book ai didi

html - CSS 水平显示字母并在单词之间添加空格

转载 作者:太空狗 更新时间:2023-10-29 15:04:37 25 4
gpt4 key购买 nike

我想让两个单词的字母从上到下垂直显示,并在最后一个单词上添加一个可控制的空间(一种padding-top)。(见下图)

letter-direction: vertically

(在 Photoshop 中,您可以通过在字母后按 Shift + Enter 获得上述效果。)


我得到了接近的结果,但有人可能知道更好的解决方案。
我的解决方案:

<p>Stalk &nbsp; Me</p>

<!-- &nbsp; is a HTML space entity -->

p {
font-size : 20px;
width : 28px; /* depends on font-size */
line-height : 20px; /* depends on font-size */
word-wrap : break-word;
text-transform : uppercase;
text-align : center;
}

Live example: https://jsbin.com/sacimo/edit?html,css,output


有人可以帮帮我吗?

谢谢!

最佳答案

您可以使用 text-orientation: upright 执行此操作和 writing-mode: vertical-rl .添加 -webkit--ms- Browser vendor prefixes如果需要像这样 Demo .

p {
writing-mode: vertical-rl;
text-orientation: upright;
text-transform: uppercase;
font-weight: bold;
}
<p>Stalk Me</p>

关于html - CSS 水平显示字母并在单词之间添加空格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35106098/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com