JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container a"><div class="inline">This is some text that is intended to overflow in the y direction but not in the x direction.</div></div>

<div class="container b"><div class="inlineblock">This is some text that is intended to overflow in the y direction but not in the x direction.</div></div>

<div class="container c"><div class="block">This is some text that is intended to overflow in the y direction but not in the x direction.</div></div>

CSS

.container {
    width: 100px;
    height: 100px;
    background: #f00;
    position: absolute; /* clip can only be used on absolutely-positioned elements */
    top: 0;
    overflow: visible;
    clip: rect(0, 125px, 125px, 0);
}

.container.a { left: 0px; }
.container.b { left: 140px; }
.container.c { left: 280px; }

.container > div {
    width: 125px;
    height: 125px;
    background-color: #0f0;
}

.inline { display: inline; }
.inlineblock  { display: inline-block; }
.block  { display: block; }