Question

我尝试过各种方法将drop-caps应用于Joomla文章。什么都行不通。

我认为我只需要将drop-caps样式（见下文）粘贴到template.css中，然后我可以将该类应用于ONCE UPON A TIME ......如下：

<p class="introduction">O</p><p>nce upon a time...</p>

我可能遗漏了一些非常简单的东西，但我无法弄清楚。附加信息：文本编辑器是tinyMCE;模板使用多个样式表。

p.introduction:first-letter 
{
 font-size: 44px;
 float: left; 
color: #D4D4C7;
 line-height: 35px;
 padding-top: 3px; 
 padding-right: 3px;
 font-family: Times, serif, Georgia;
}

Answer 1

您可以尝试在一个范围中包装第一个字母并将其显示为内联块。这应该允许你按照你喜欢的方式设置第一个字母的样式。它应该仍然是内联的。

Answer 2

我建议使用简单的jQuery获取文章的第一个字母，并将其放入文章顶部的浮动div中。

您的HTML应该完全相同：

<div class="content">
    <div class="drop-caps"></div>

    <p>Once upon a time lorem ipsum dolor sit amet, nibh fuga quam at ut, justo ante nullam urna est, turpis...</p>
</div>

Drop Cap（大写字母）的Css规则：

.drop-caps {
    padding: 0 10px;
    float: left;
    font-size: 48px;
    display: block;
    text-transform: uppercase;
    line-height: 48px;
}

和jQuery：

    var firstSentence = $('.content').find('p:first').text();
    $('.content').find('.drop-caps').append(firstSentence.charAt(0));

    if ($('.drop-caps + div').length) {
        $('.drop-caps').hide();
    }

这是实际的JSFfiddle Demo。

造型Joomla内容 - Drop Caps CSS

2 个答案: