JSFiddle - React, Tailwind, and code Playground

HTML

<div class="news-caption">This is a demonstration of how to have a multiline padded background color on any amount of text. enjoy fkdjfkdjfkd djfkd  fkdj fdk fkdjf dk dsds skdjsk </div>
<div class="news-caption">
This is a demonstration of how to have a multiline padded background color on any amount of text. enjoy fkdjfkdjfkd djfkd  fkdj fdk fkdjf dk dsds skdjsk
</div>

CSS

body {font-family: arial; font-weight:700}

.news-caption {width: 200px;line-height:1.5em}
.news-caption span {background-color: black; color: white;}

/* Note: Using larger paddings & larger fonts require you to add a bigger lineheight onto the parent container */

JavaScript

/*!
 * jQuery Typographic Background Plugin
 * http://owenmelbourne.com
 *
 * Copyright 2012, Owen Melbourne || Selesti Ltd
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.opensource.org/licenses/GPL-2.0
 */

(function($){
 $.fn.typographicbg = function(options) {

     var defaults = {
       padding: '5px',
      };
     var options = $.extend(defaults, options);

    return this.each(function() {

      var selector = $(this);
      var padding = options.padding;

      $(selector).each(function(){
      
      // Wrapping Words in Spans for padding application
            var string = $(this).text().split(' ');
            var word = $(this);
            $(this).text('');
            $.each(string, function(){
                word.append('<span>'+this+' </span>');
            });

            $(this).find('span').css({'padding-top': padding, 'padding-bottom': padding});
            $(this).find('span:first-child').css('padding-left', padding);
            $(this).find('span:last-child').css('padding-right', padding);

            var startingheight = $(this).find('span').position().top;
            $(this).find('span').each(function(){
            
            var thisheight = $(this).position().top;

    //Apply the padding to new lines and previous
                if (thisheight > startingheight) {
                $(this).attr('data-ypos','height is: '+thisheight);
                startingheight = thisheight;
                $(this).css('padding-left', padding);
                $(this).prev().css('padding-right', padding);
                }
                
            
            });


        });

    }); 
 }; 
})(jQuery);

/* End Plugin Code */

// Run the plugin on .news-caption 
$(function(){
    $('.news-caption').typographicbg({padding: '5px'});
});