html - 有没有办法删除 span 元素内的空间？

Question

我尝试为文本的每一行赋予父 block 的确切宽度。我快完成了，但由于跨度内的奇怪空间，有些线条略有移动。

这是一个 fiddle

var $wrapper = $('#wrapper');
$(window).on('load', function() {
  $('.text').each(function() {
    if ($(this).width() > $wrapper.width()) {
      while ($(this).width() > $wrapper.width()) {
        $(this).css('font-size', (parseInt($(this).css('font-size'), 10) - 1));
      }
    }
  });
  $wrapper.removeClass('invisible');
});

h1 {
  position: relative;
  font-weight: 600;
  text-align: center;
}
h1 .text {
  display: inline-block;
  font-size: 40rem;
  line-height: 1;
  white-space: nowrap;
}
.wrapper {
  width: 37.4rem;
  margin: 0 auto;
  opacity: 1;
  transition: opacity 1s ease;
  visibility: visible;
}
.wrapper.invisible {
  opacity: .00001;
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper invisible" id="wrapper">
  <h1>
    <span class="text">Lorem</span>
    <span class="text">ipsum dolor sit amet</span>
    <span class="text">consectetur adipisicing elit</span>
  </h1>
</div>

如您所见，有些线比其他线大。这是因为元素边缘和实际文本之间有这个空间

有没有办法让它完美对齐？

Answer 1

我不同意 connexo 的评论。你看到的空间在那里是因为你正在使用 display: inline-block;。当您显示内联时，它以老式排版方式进行布局，中间有空格。

您可以直接在空格之后定位跨度，并在其上放置一个负的左边距以消除空格。