<分区>
<分区>
我有一些文本需要格式化,以便第一个字母变大。没有 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>
如果我只是将 span
的 font-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/