JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="shrunken">asdaaaa asdaasdasdasd asd asd asd div</div>
</div>

CSS

.wrapper {
  text-align: center;
  background-color: #eee;
  overflow: auto;
  padding: 20px 0;
}

.shrunken {
  display: inline-block;
  font-size: 24px;
  background-color: #ddd;
  max-width: 200px;
  
  
  width: min-content;
  word-break: normal;
  
  
}