样式化 Joomla 内容 - 首字下沉 CSS答案

【问题标题】：Styling Joomla Content -- Drop Caps CSS样式化 Joomla 内容 - 首字下沉 CSS
【发布时间】：2012-04-24 05:50:56
【问题描述】：

我尝试了多种方法将首字下沉应用于 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;
}

【问题讨论】：

你到底想做什么？
为什么要把段落分成两段？

标签： css joomla

【解决方案1】：

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

【讨论】：

【解决方案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 Caps（大写字母）的 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。

【讨论】：