Ellipse text in middle only

by Julien Roche

HTML

<body class="wrapper">
  <div class="wrapper--no-ellipsis">The following text: "</div>
  <div class="wrapper--ellipsis">text to be ellipis</div>
  <div class="wrapper--no-ellipsis">" should be ellipsis</div>
</body>

CSS

.wrapper {
  display: flex;
  font-size: 1.5rem;
  overflow: hidden;
}

.wrapper--no-ellipsis {
  flex: 0 0 auto;
  font-style: italic;
  min-width: 0px;
}

.wrapper--ellipsis {
  flex: 0 1 auto;
  font-weight: bolder;
  min-width: 1.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}