Html CSS Dropcap引导程序5

我想设计这样一款Dropcap：

大号字母约为标题大小的400%，文本从标题下开始，并带有大号字母的下划线 如果标题是2行的高度，它是好的，但如果它的唯一的O线，它的中心在大字母

的中间。

<div class="col-auto d-none d-md-block">
        <span class="dropcap d-block mt-n7">[first letter of the headline]</span>
    </div>
    <div class="col pl-3">
        <p class="h3 dropcap-text">
            headline text
        </p>
        <p>
           Text
        </p>
    </div>

---

我已经用左边的浮点数尝试了这个解决方案，但我无法用它在dropcap底部显示标题。

你可以用网格解决这个问题，试试这个：

HTML

---

您可以使用网格解决此问题，请尝试以下方法：

HTML

---

“我这样构造是因为在移动设备上dropcap是一个普通的字母。”-为什么这会证明这样一个奇怪的结构是合理的？不，这没什么意义。（与将具有假定的“标题”含义的内容放在段落元素中一样。）@CBroe naaa是因为文本的边距必须与dropcap的宽度相同width@BjørnNyborg问题是文本的第一行开始于dropcap字母的开头，但它应该开始于dropcap的结尾letter@CBroe我更新了img，所以现在你可以看到margin@BjørnNyborg是的，好吧，但现在是标题可以是1到3行，结尾应该是dropcap字母“我是这样构造的，因为在移动设备上dropcap是一个普通的字母。”-为什么这会证明这种奇怪的结构是合理的？不，这没什么意义。（与将具有假定的“标题”含义的内容放在段落元素中一样。）@CBroe naaa是因为文本的边距必须与dropcap的宽度相同width@BjørnNyborg问题是文本的第一行开始于dropcap字母的开头，但它应该开始于dropcap的结尾letter@CBroe我更新了img，所以现在你可以看到margin@BjørnNyborg是的，好吧，但现在是标题，可以是1到3行，应该以dropcap字母结尾

.dropcap{
    @media all and (min-width: $breakpoint-md) {
        text-decoration: underline;
        text-underline-offset: 0.5rem;
        text-decoration-color: $primary;
        font-weight: $font-weight-normal;
        font-size: $h3-font-size * 4;
    }
}

.dropcap-text {

    &::first-letter {
        @media all and (min-width: $breakpoint-md) {
            font-size: 0;       
        }
    }
}

<div class="dropcap">
        <span class="dropcap-firstletter d-none d-md-inline">
            first letter of the headline
        </span>
        <p class="h3 dropcap-headline">
            headline
        </p>
        <div class="dropcap-text">
            <p>
        text
        </p>
            
        </div>
        
    </div>

.dropcap {

    @media all and (min-width: $breakpoint-md) {
        display: grid;
        grid-template-columns: auto auto;
        column-gap: 10px;
    }

    .dropcap-firstletter {

        @media all and (min-width: $breakpoint-md) {
            text-decoration: underline;
            line-height: 1;
            text-underline-offset: 0.5rem;
            text-decoration-color: $primary;
            font-weight: $font-weight-normal;
            font-size: $h3-font-size * 4;
        }
    }

    .dropcap-headline {
        align-self: end;

        &::first-letter {
            @media all and (min-width: $breakpoint-md) {
                font-size: 0;       
            }
        }
    }

    .dropcap-text {
        grid-column-start: 2;
    }

}