css - 包装标题上的首字下沉/首字母大写

Question

我正在尝试对标题产生首字下沉(或首字母大写；无论您怎么调用它)效果。这是我正在尝试完成的示例。

我发现 float 的内联 span 标签很成功，但是当标题换行到第二行时，段落部分会换行。请参阅此 jsfiddle 示例并调整查看窗口以查看我所指的效果。 http://jsfiddle.net/fEn4U/

前两个 jsfiddle 示例中的结构(带有 h1 和 p 标记)是我希望拥有 html 的方式。但如果那是唯一的解决方案，我可以接受 p 标记中的 span。如您所见，与使用 span 和 p 标签相比，我距离 h1、p 结构的解决方案更远。

另请注意，容器的宽度是固定的，而其中的内容是动态的，所以我不能总是依赖标题分成两行或停留在一行上。

Answer 1

尝试让您的小文本inline-block 并设置最大尺寸。

http://jsfiddle.net/fEn4U/2/

p {
  display: inline-block;
  max-width:150px;
}