0

我尝试了各种方法来将首字下沉应用到 Joomla 文章中。没有任何效果。

我假设我只需要将首字下沉样式（见下文）粘贴到 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;
}
4

2 回答 2

0

您可以尝试将第一个字母包装在跨度中并将其显示为内联块。这应该允许您随意设置第一个字母的样式。它仍然应该内联。

于 2012-04-24T08:00:11.680 回答
0

我建议使用简单的 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>

首字母大写（大写字母）的 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 演示。

于 2015-10-30T17:29:48.210 回答