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

标签 html css

我尝试为文本的每一行赋予父 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>

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

enter image description here

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

最佳答案

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

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

关于html - 有没有办法删除 span 元素内的空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40403253/

相关文章:

html - 如何给输入边框左右小长度

javascript - 自动点击jsp页面上的 anchor 标签链接

html - CSS/HTML : div's position doesn't stay sticky when below an "absolute" div

html - 向右浮动属性 block 另一个 div

Php 包含带有指向 css 的链接的头部不起作用

javascript - 从 REST 获取数据并重定向到另一个页面

javascript - 我无法正确使用光滑的 slider ,它没有显示任何类型的结果

javascript - 找出沿圆有多少列和行

html - 如何在没有伪类、JS 或 <tr> 类的情况下设置备用表行的样式

jquery - 轮播图标未以正确格式显示?