两行文字从一个字母开始水平和垂直

问题描述

我想制作一个横幅部分，其中文本从一个字母开始，但指向不同的方向。这是短语“Hyggo Home”，所以Hyggo 应该保持水平，Home 应该从“Hyggo”的现有字母H 开始，然后垂直向下。我尝试了几种方法，但都没有奏效。有什么想法吗？

解决方法

你去吧，解决方案来自 CSS

创建两个 div，因为它们可以默认具有宽度和高度
第一个 div 是 hyggo
第二个 div 主页
根据字体大小添加以下样式 word-wrap: break-word; 和宽度
在单词 home 的每个字符之间添加空格
瓦拉享受

<div>Hygo</div>
<div style=" word-wrap: break-word; width:12px;">H o m e</div>

您可以尝试在 CSS 中使用 text-orientation 和 writing-mode

类似于：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }
        #vertical-text {
            writing-mode: vertical-rl;
            /* text-orientation: sideways; */
            text-orientation: upright;
        }
    </style>
</head>
<body>

    <p>Hyggo</p> 
    <p id="vertical-text">ome</p>
    
</body>
</html>

在侧身和直立之间改变 text-orientation 可以产生不同的效果，如下所示：

https://css-tricks.com/almanac/properties/t/text-orientation/

html typography