有没有办法删除span元素中的空格？

Question

我尝试给文本的每一行提供父块的确切宽度。我差不多完成了，但由于跨度内部有一个奇怪的空间，一些线条略微移动了。

这是一个小提琴

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;。当您显示内联时，它以旧学校排版方式布局，中间有空格。

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