html - 文字环绕的大字母

标签 html css

<分区>

我有一些文本需要格式化,以便第一个字母变大。没有 CSS 的文本看起来像这样:

<p>
  <span>V</span>estibulum et arcu sodales dolor sagittis sollicitudin. Pellentesque vitae eros nec lacus iaculis viverra. Maecenas vitae sapien et augue tincidunt elementum. Pellentesque velit. Mauris eget tellus. Proin ultricies scelerisque magna. Sed
  pretium tempor mi. Aenean vel lacus. Cras quam. Ut faucibus enim sed mauris. Morbi malesuada nunc eu arcu. Integer quam. Quisque ac nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ac mi sit amet ante aliquet euismod. Ut suscipit.
  In turpis. In at diam nec elit malesuada venenatis. In nec leo nec est ullamcorper nonummy. Suspendisse in nisl. Nam dolor. Nunc
</p>

如果我只是将 spanfont-size 设置得比段落的大,字母确实会变大,但下一个字母会从右下角开始。我需要让下一个字母从右上角开始,段落的线条围绕大字母流动。我尝试过使用垂直内联,但似乎无法做到正确。

最佳答案

这是你需要的吗?

  p:first-letter {
    float: left;
    font-size: 5em;
    line-height: 0.5em;
    padding-bottom: 0.05em;
    padding-top: 0.2em;
  }
<p>Vestibulum et arcu sodales dolor sagittis sollicitudin. Pellentesque vitae eros nec lacus iaculis viverra. Maecenas vitae sapien et augue tincidunt elementum. Pellentesque velit. Mauris eget tellus. Proin ultricies scelerisque magna. Sed pretium tempor
  mi. Aenean vel lacus. Cras quam. Ut faucibus enim sed mauris. Morbi malesuada nunc eu arcu. Integer quam. Quisque ac nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ac mi sit amet ante aliquet euismod. Ut suscipit. In turpis. In
  at diam nec elit malesuada venenatis. In nec leo nec est ullamcorper nonummy. Suspendisse in nisl. Nam dolor. Nunc</p>

关于html - 文字环绕的大字母,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35496447/

上一篇:html - 如何在 twitter-bootstrap 网格表中隐藏太长的文本?

下一篇:html - 仅使用 css 删除没有 jquery 的类或背景属性,这可能吗?

相关文章:

html - 水平滚动条未显示

javascript - 一个 "unstyle"如何成为一个 div html 元素?

html - 在悬停 anchor 链接时更改 DIV

html - 表单提交按钮上的渐变和图像?

asp.net - 以编程方式控制 ListView CSS

css - 无法覆盖angularjs中的复选框

javascript - javascript 创建的 JSON-LD 不显示在 View 源中

javascript - 在 JS 中等效于应用于 SVG 元素的调整大小的 css

php - 当我使用重写 url 时,我无法访问我的 css 和 js 文件

html - 如何保持两个并排的 div 元素高度相同?