JSFiddle - React, Tailwind, and code Playground

by niik

HTML

<div id="wrapper">
  <sidebar>sidebar</sidebar>
  <main>
    <div class="title-container">
      <div class="icon">😢</div>
      <div class="title">
        wow such a long text that I'd really like to truncate with an ellipsis
      </div>
    </div>
  </main>
</div>

CSS

#wrapper {
  width: 400px;
  height: 400px;
  outline: 1px dotted blue;
  
  display: flex;
}

sidebar {
  background: lightblue;
  width: 100px;
}

main {
  align-self: center;
  display: flex;
  flex-direction: column;
  min-width: 0;
  
  outline: 1px solid green;
  flex-grow: 1;
}

.title-container {
  flex: 1;
  display: flex;
  
  outline: 1px dotted red; 
  align-self: center;
  max-width: 100%;
}

.icon {
}

.title {
  outline: 1px dotted purple; 
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}