CSS代码根据第一个单词的长度负缩进

我有一些代表纸张的html代码。在h3标签中，我有一个章节的标题。一个章节可以有一个编号。number是可选的，它位于类"number"的span中。我希望所有章节标题文本从页面边缘的相同距离开始。它被设置为填充值3cm。问题是，我希望所有的数字之前的标题"填充区域"。示例如下:

<>之前1.2章节标题一些其他的文本1.2.1小节的某些标题数字旁边的所有其他线都以相同的距离开始从页面左侧开始。之前

<body>
<div style="padding:3cm">
<h3><span class="number">1.2 </span>Chapter title</h3>
</div>
</body>

不幸的是，我不能改变html代码。我的想法是做一些魔术，把章节文本之前的数字相对于它，并使跨度右对齐到文本的左侧。仅使用CSS是否可行?

现在我使用javascript代码和文本缩进:-xxx ch;加到h3。问题是，xxx必须为每个h3标签计算。我希望可以用

是的，它可以通过CSS完成，看看这个代码片段:

h3 {
  position: relative;
}
h3 > span.number {
  position: absolute;
  top: 0px;
  left: -3cm;
  text-align: right;
  width: 3cm;
  padding-right: 5px;
  box-sizing: border-box;
}

<body>
  <div style="padding:3cm">
    <h3><span class="number">1.2 </span>Chapter title</h3>
    <h3><span class="number">1.2.4.5 </span>Chapter title</h3>
    <h3><span class="number">1.3.1.2.4 </span>Chapter title</h3>
    <h3><span class="number">1 </span>Chapter title</h3>
  </div>
</body>

添加.number类的样式

.number {
  text-align: right;
  width: 50px;
  display: inline-block;
  position: absolute;
  left: 50px;
}

看这里https://jsfiddle.net/6mpo5k2x/

相关内容

最新更新

热门标签：