JSFiddle - React, Tailwind, and code Playground

by Julien Roche

HTML

<div class="constraint">
  <div class="box">With a verrryyyyyy veeeeeeerrrrrrryyyyyy long comment for this user (and more and more and more and more, and more again again again again)</div>
</div>

<br />

<div class="constraint">(without parent) With a verrryyyyyy veeeeeeerrrrrrryyyyyy long comment for this user (and more and more and more and more, and more again again again again)
</div>

<br />

<div class="constraint box">(without parent but box class) With a verrryyyyyy veeeeeeerrrrrrryyyyyy long comment for this user (and more and more and more and more, and more again again again again)
</div>

CSS

body {
  display: flex;
  flex-direction: column;
}

.constraint {
  border: 1px solid red;
  flex: 1 1 auto;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box {
    box-sizing: border-box;
    color: rgb(153, 153, 153);
    display: block;
    font-family: SegoeUI, sans-serif;
    font-size: 14px;
    font-stretch: 100%;
    font-style: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-weight: 400;
    height: 18px;
    line-height: 18px;
    max-width: none;
    min-height: 0px;
    outline-color: rgb(153, 153, 153);
    outline-style: none;
    outline-width: 0px;
    text-overflow: ellipsis;
    white-space: nowrap;
}