Css 将大写字母/首字母大写字母放在包裹的标题上

我试图在标题上获得一个下降的大写字母（或初始大写字母；不管你怎么称呼它）效果。这是一个我正在努力完成的例子

我发现使用浮动的内联跨距标记是成功的，但是当标题换行到第二行时，段落部分会打断到自己的行上。查看这个JSFIDLE示例，并调整查看窗口以查看我所指的效果

前两个jsiddle示例中的结构（带有

h1

和

p

标记）是我希望使用html的方式。但是如果这是唯一的解决方案，我可以在

p

标签中选择

span

。正如您所看到的，与使用span和p标记相比，我离使用h1，p结构的解决方案更远

---

还要注意的是，容器的宽度是固定的，其中的内容是动态的，因此我不能总是依赖标题分成两行或停留在一行上。

尝试使您的小文本

内联块

并设置最大大小

---

对不起，这对我不太管用。它假设我知道标题第二行和包含框之间的空格宽度，而我不知道。就像我说的，内容将是动态的，所以如果空白空间小于150px，或者我设置的最大宽度是什么，那么p块会推到下一行，这显然是我不想要的。哦，我现在明白了。这是一个js解决方案。将尝试使用纯css进行实验。

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