JSFiddle - React, Tailwind, and code Playground

by alano

HTML

<button onclick="doBlock()">block</button>
<button onclick="doInline()">inline-block</button>
<br />
<div class="ul-list-line">
    <ul><li>List Item</li></ul>
</div>
<ul class="footer">
    <li>Name |</li>
    <li>Street |</li>
    <li>Location |</li>
</ul>

CSS

.footer li { display:inline-block; }

JavaScript

var $list, $li; //var for quick access
$(document).ready(function () {
    $list = $('.ul-list-line ul li:first'); //first occurrence
    $li = $('.footer li');
    //create both versions of text in Data attributes
    $li.each(function () {
        $(this).data('original', $(this).text());
        $(this).data('trimmed', $(this).text().split(' |')[0]);
    });
});

$(window).resize(function() {
    if ( $list.css('display') == 'inline-block' ) {
        $li.each(function() { //switch to original text
            $(this).text($(this).data('original'));
        });
    } else if ( $list.css('display') == 'block' ) {
        $li.each(function() { //switch to trimmed version
            $(this).text($(this).data('trimmed'));     
        });
    }
});

// switch modes for testing purposes...
function doBlock() {
    $list.css('display', 'block');
    $(window).trigger('resize');
}

function doInline() {
    $list.css('display', 'inline-block');
    $(window).trigger('resize');
}