JSFiddle - React, Tailwind, and code Playground

by Wentz Wu

HTML

<div class="container">
    <div id="box">box</div>
     <h1 class="oneline">Hello_Overflow</h1>

    <p>This is a very loooooooooooooooooooooooooooooong <span class="longword">loooooooooooooooooooooooooooooong</span> word. The first step to start using Flexbox is to create a flex container. Children of a flex container are called the flex items, and are laid out inside the flex container using the Flexbox properties. Some of the Flexbox properties apply to the container, others are applied to the flex items.</p>
</div>

CSS

div {
    border: 1px solid red;
}
.container {
    width: 200px;
    height: 200px;
}
#box {
    width: 150px;
    margin-top: 10px;
    margin-left: 100px;
    color: white;
    background-color: red;
}
.longword {
    color: red;
}
.oneline {
    overflow : hidden;
    white-space : nowrap;    
    text-overflow : ellipsis;    
}