Question

我被指控制作印刷身份证（因此我使用cm和pt单位），我需要文字非常小才能使用。

我唯一拥有的是css，我无法更改HTML，内容是从数据库加载的。 当我将字体大小设置为小于12pt时，跨度会越来越小或更准确地停止越来越近。我无法使跨度位置相对，因为有些标题太长而不适合一行（这就是为什么我需要文字这么小）所以它需要相对位置。

我可以通过什么方式让跨度更接近，而不会占据当时的位置：绝对

我为你做了一个例子（动画只是为了展示跨度的高度如何随着文本而缩小）：

body{
  padding:0;
  margin:0;
}
#container, span{
  width:7.5cm;
  font-family:sans-serif;
  padding: 0.5cm 0;
}
#container{
  background:grey;
  height:10cm;
}
span{
  display:inline-block;
  text-align:center;
  box-sizing: border-box;
  line-height: normal;
  height: auto;
  max-height: none;
  padding: 0cm 1.2cm;  
}
.name{
  font-size:12pt;
  line-height:initial;
  text-transform: uppercase;
  font-weight:bold;
  position: relative;
  top: initial;
  /*margin-top: 6.87cm;*/
  margin-bottom:0.05cm;
}
.title{
  font-size:5pt;
  line-height:initial;
  text-transform: uppercase;
  margin-top:0.05cm;
  animation-duration: 3s;
  animation-name: moving;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.role{
  font-size:7pt;
  line-height:initial;
}
@keyframes moving {
    0% {
        font-size: 5pt;
    }
    50% {
        font-size: 15pt;
    }
    100% {
        font-size: 5pt;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <span class="name">Name</span>
  <span class="title">Title 1</span>
  <span class="role">Role 1</span>
  <span class="title">Title 2</span>
  <span class="role">Role 2</span>
</div>

Answer 1

将容器的line-height设置为0：

＆＃13;

body{
  padding:0;
  margin:0;
}
#container, span{
  width:7.5cm;
  font-family:sans-serif;
  padding: 0.5cm 0;
}
#container{
  background:grey;
  line-height: 0;
  height:10cm;
}
span{
  display:inline-block;
  text-align:center;
  box-sizing: border-box;
  line-height: normal;
  height: auto;
  max-height: none;
  padding: 0cm 1.2cm;  
}
.name{
  font-size:12pt;
  line-height:initial;
  text-transform: uppercase;
  font-weight:bold;
  position: relative;
  top: initial;
  margin-top: 6.87cm;
  margin-bottom:0.05cm;
}
.title{
  font-size:5pt;
  line-height:initial;
  text-transform: uppercase;
  margin-top:0.05cm;
  animation-duration: 3s;
  animation-name: moving;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.role{
  font-size:7pt;
  line-height:initial;
}
@keyframes moving {
    0% {
        font-size: 5pt;
    }
    50% {
        font-size: 15pt;
    }
    100% {
        font-size: 5pt;
    }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <span class="name">Name</span>
  <span class="title">Title 1</span>
  <span class="role">Role 1</span>
  <span class="title">Title 2</span>
  <span class="role">Role 2</span>
</div>

＆＃13;

是否在内联块跨度上锁定了最小高度？

1 个答案: