JSFiddle - React, Tailwind, and code Playground

by Adam Mendoza

HTML

<ul>
    <li><span>Some text</span></li>
    <li><span>Some text<br />some more text</span></li>
    <li><span>some test text</span></li>
    <li><span>even more text<br />and more</span></li>
    <li><span>even more text and more long line very very ver long expand even more? Ts tst tst test. What now test tsrt tst. CSS is cool. :) </span></li>
    <li><span>evenmoretextandmorelonglineveryveryverlongexpandevenmore?Tststtsttest.Whatnowtesttsrtdtst.
    CSS is cool. :) </span></li>
</ul>

CSS

ul li {
    display: block;
    /* height: 3em; */
    line-height: 12px;
    border: 1px solid #ff0000;
    width: 10em;
    word-break: break-all;
    /* overflow-wrap: break-word; */
    /* word-wrap: break-word; */
}

ul li span {
    display: inline-block;  
    vertical-align: middle;     
}

ul li:before{
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;    
}