Html 将文本换行到已删除的大写符号上

我正在处理的HTML/CSS页面有问题。它有几个带编号的段落，文字与最后一行文字上的“点”符号重叠。你可以在下图中更准确地看到我所指的内容。这将是一个静态页面，但我会喜欢一个解决方案，不需要固定的位置

-这是我需要实现的目标

我所面临的问题是，我相信，当我给它一个大字体时，由于点符号的高度，我最终得到了这个

-这就是我能到达的地方

编辑：我包括下面的HTML和CSS文件

代码：

.mainText{
字号：1.5em；
宽度：500px；
}
.dropCapOne、.dropCapDot{
字体大小：230px；
浮动：左；
}
dropCapOne先生{
字母间距：-60px；
}
.restOfText{
利润上限：70像素；
位置：绝对位置；
宽度：300px；
}

1.
.
Lorem ipsum dolor sit amet，是一位杰出的献身者。
自由孕妇，调味品nisi ut，tristique justo。
乌尔纳河，索利西图丁河

这是可能的，只是有很多麻烦

主要的问题是要将文本包裹在圆点上方，在这种情况下（我的小提琴），一个红色的正方形，我相信你可以计算出圆点来替换红色的正方形（如果你必须的话，边界半径）

我将圆点移到了文本范围内（现在您知道了实现这一点的概念，可以尝试将其移出）。我在圆点上方添加了一个间隔（浮动），这样我们可以将圆点向下推到适当的位置，为圆点留出空间，这样你就得到了你需要的东西

点使用边界半径-

CSS

HTML

1.
. Lorem ipsum dolor sit amet，是一位杰出的献身者。自由孕妇，调味品nisi ut，tristique justo。乌尔纳河，索利西图丁河

---

我当然从一开始就拒绝了这个设计，虽然

图片很好，但是我们需要看到一些CSS和HTML！与html/css代码的链接将是一个更大的问题，只需包含一个链接，这样我们就不会依赖JSFIDLE…在第五行文本的开头获得必要的空间将是这里的主要问题-并且不是一个使用css可以轻松实现的问题，除非您愿意尝试css形状，但是除了很差的浏览器支持（）之外，恐怕这对动态数字也不太管用。在CSS造型之前，人们习惯于使用两个浮动元素和不同宽度的清除元素来实现类似效果，使文本与半圆或其他曲线对齐，也许这是一种方法……我肯定从一开始就拒绝了这种设计

.dropCapDot{
   width: 30px;
   height: 30px;
   background: red;
   overflow: hidden;
   clear: left;
}
.dropSpacer {
  float: left;
  width: 1px;
  height: 108px;
}

<div class="mainContent">
  <div class="mainText mainTextFirst">
    <span class="dropCapOne">1</span>

    <span class="restOfText">
                <span class="dropSpacer"></span>
    <span class="dropCapDot">.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed libero gravida, condimentum nisi ut, tristique justo. Nullam erat urna, sollicitudin
    </span>
  </div>
</div>