Question

我正在使用dropcaps.js来将句子的第一个字母与其余部分分开，并使其更大/ dropcap。除了句子的第一个单词只有两个字母之外，下面的代码运行正常。在这种情况下，无论是否存在空格（无论多少），第二个字母（而不是首字母大写字母）都紧挨第二个单词。下面的代码可能会导致这种情况吗？

// Jquery
// Isolate the first letter of relevent paragraphs and place within <span>
    $('p.has-drop-cap').each(function() {
        var text = $.trim($(this).html());
        var firstLetter = text.substr(0,1);
        $(this).html('<span class="initial-letter">' + firstLetter + '</span>' + '<span class="remaining-text">' + text.slice(1) + '</span>');
    }); 

    // Init dropcap.js and target <span>
    var dropcaps = document.querySelectorAll(".initial-letter");
    // Set dropcap number of rows to fit and baseline position
    window.Dropcap.layout(dropcaps, 5, 5);

// CSS  
// For first letter
.initial-letter {
    float: left;
    padding: 0px;
    font-size: 182px;
    line-height: 0px;
    margin-top: 6.3px;
    height: 127.4px;
}
// For second letter
p.has-drop-cap:first-letter {
    font-size: inherit !important;
    line-height: inherit !important;
    margin: 0 !important;
    text-transform: lowercase !important;
}

Answer 1

问题已通过.initial-letter定位到float: left，以正确定位自身。出于我不能100％确信的原因，这意味着如果.remaining-text中的第一个单词是<2个字符，则在这2个字母和下一个单词之间将不加空格。

我发现将display: flex应用于父p.has-drop-cap可以解决此问题，即使不删除float: left上的.initial-letter。

当第一个单词是2个字母时dropcaps.js问题

1 个答案: