JSFiddle - React, Tailwind, and code Playground

by mreis1

HTML

<div class="box">
    <div class="parent">
        <span class="text">
            A minha palavra não pode saltar por nada deste mundo
        </span>
    </div>
</div>

<div class="box">
    <div class="parent">
        <span class="text2">
            C/ display block A A A A A A A A A AA A A A A A A A A A A A A A A A A AA A A A A A A A A A A A A A A A A AA A A A A A A A A A A A A A A A A AA A A A A A A A A A A A A A A A A AA A A A A A A A A A A A A A A A A AA A A A A A A A A A A A A A A A A AA A A A A A A A A A A A A A A A A AA A A A A A A A A A A A A A A A A A
        </span>
    </div>
</div>

<div class="box">
    <div class="parent">
        <span class="text3">
            C/ display block A A A A A A A A A AA A A A A A A A A A A A A A A A A AA A A A A A A A A A A A A A A A A AA A A A A A A A A A A A A A A A A AA A A A A A A A A A A A A A A A A AA A A A A A A A A A A A A A A A A AA A A A A A A A A A A A A A A A A AA A A A A A A A A A A A A A A A A AA A A A A A A A A A A A A A A A A A
        </span>
    </div>
</div>

CSS

.box{
    width:300px;
    height:250px;
    border:1px dotted #ddd;
}

.parent{
    height:150px;
    width:200px;
    border: 1px dotted #333;
    overflow:hidden;
}
.text{ margin-right:25px; background-color:#333; color: #fff; padding:5px; line-height:1.4em}
.text2{
    padding-right:25px;
    display:block;
}