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/

相关文章:

javascript - 从静态图像到视频的 CSS 转换在 Safari 中不稳定

jquery - 设置变量宽度为:before and :after elements in CSS

javascript - 如何使用浏览器滚动来实现内部 div 的 x 溢出?

javascript - 使用初始调用创建 jQuery 插件并覆盖默认值

javascript - 用页眉扩展边距

javascript - 根据点击 Bootstrap 更改文本

css - 更改 typeahead tt-input 背景颜色时 tt-hint 未显示

c# - 如何将波浪号的相对路径呈现为 ../../jquery/javascript 中的相对路径?

html - 制表单元格跨度

google-chrome - Chrome / Safari : box-shadow only appears on text input if border is specified