• you meant something like this? :

• you may update your styles to this:

.message-second-line {
  width: 200px;
}
    
.message-text {
  position: relative;
  max-width: 100%;
  display: -webkit-box;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

it's the display: -webkit-box and line-clamp properties. but be aware that these are not standard and consider the browser support. you may check MDN docs on line-clamp, but couldn't find docs for -webkit-box.