有沒有辦法去除span元素內的空間？

我嘗試給文本的每一行父塊的確切寬度。我差不多完成了，但由於跨度內的奇怪空間，一些線條略微偏移。有沒有辦法去除span元素內的空間？

這裏是一個小提琴

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>

正如你所看到的，一些線比別人大。這是因爲該元素的邊緣與實際文本