我怎样才能做出这样的标题？答案

【问题标题】：How can I make an title like this?我怎样才能做出这样的标题？
【发布时间】：2022-01-12 02:25:00
【问题描述】：

所以...我想写一个这样的标题：

但问题是当我尝试制作它时，标题的较大文本不会与其他文本保持紧密，并且左边框不适合“Pablo”的顶部和“的底部” CG监督……”：

这是我的代码：

HTML

<body>
    <h1>
        <span class="span1">Pablo</span><br>
        <span class="span2">Emmanuel De Leo</span><br>
        <span class="span3">CG Supervisor / TD / Tool Development</span>
    </h1>
</body>

CSS

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

h1 {
    font-family: Arial;
    text-transform: uppercase;
    border-left: 5px solid red;
    padding-left: 5px;
}

h1 .span1 {
    font-size: 100px;
}

h1 .span2 {
    font-size: 34.3px;
    line-height: 0;
}

h1 .span3 {
    font-size: 15px;
    padding-left: 3px;
}

顺便说一句……我自己试过了，我明白了，但是为了响应式适应太烦人了，我认为把这个标题改成这样不是一个好主意……

这是另一个代码：

HTML

FONT:
<link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@300;400;500;700&display=swap" rel="stylesheet">

<body>
    <div class="header-title-container">
        <div class="header-intro"></div>
        <div class="header-title">
            <h1>
                <span>Pablo</span>
                <span>Emmanuel De Leo</span>
            </h1>
            <h3>CG Supervisor / TD / Tool Development</h3>
        </div>
    </div>
</body>

CSS

.header-title-container {
    display: flex;
    justify-content: center;
}

.header-title-container .header-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-family: 'Red Hat Text', sans-serif;
}

.header-title-container .header-title h1 {
    display: flex;
    flex-direction: column;
    font-weight: 700;
}

.header-title-container .header-title h1 span:first-child {
    font-size: 70px;
    margin-bottom: -20px;
}

.header-title-container .header-title h1 span:nth-child(2) {
    padding-left: 3px;
    font-size: 23.8px;
    margin-bottom: -30px;
}

.header-title-container .header-title h3 {
    font-size: 11px;
    font-weight: 300;
}

.header-title-container .header-intro {
    width: 5px;
    height: 98px;
    background-color: red;
    align-self: flex-end;
    position: relative;
    right: 2px;
    bottom: 12px;
}

【问题讨论】：

你可以从中得到一些想法：jsfiddle.net/h8xug4c3/1
@JoãoPauloMacedo 哇，好主意，非常感谢！

标签： html css responsive-design frontend

【解决方案1】：

使用<div>s 而不是<span>s，这将允许您分别控制三行中的每一行的行高和边距。

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.fred {
    font-family: Arial;
    text-transform: uppercase;
    border-left: 5px solid red;
    padding-left: 5px;
    margin: 20px;
}

.fred>*:first-child {
    font-size: 100px;
    line-height: 75px;
    position: relative;
    left: -5px;
}

.fred>*:nth-child(2)  {
    font-size: 34px;
    margin-bottom: 10px;
}

.fred>*:last-child {
    font-size: 15px;
    padding-left: 3px;
}

<h1 class="fred">
        <div>Pablo</div>
        <div>Emmanuel De Leo</div>
        <div>CG Supervisor / TD / Tool Development</div>
    </h1>

【讨论】：

是的，这是个好主意，非常感谢！但是...问题在于，当您想让它响应时，因为左边框不会随标题增长...
嗯，我想你会发现的。如果您将 sn-p 设为整页，然后使用响应式设计模式切换到手机视图，则当文本环绕到其他行时，红色边框确实会增长以匹配。