JSFiddle - React, Tailwind, and code Playground

HTML

<div id="card">
    <p>This is random text that I want to stay on one line</p>
    <p>But when it doesn't fit then I want it to be truncated</p>
    <p>And have an ellipsis at the end</p>
</div>

CSS

#card{
    width:200px;
    background:red;
    color:#000000;
    font-size:16px;
}
#card p{
    -o-text-overflow:ellipsis;
	-o-text-overflow:"...";
	-o-text-overflow:"…";
	text-overflow:ellipsis;
	text-overflow:"...";
	text-overflow:"…";
    white-space:nowrap;
}