<div class="text--overflow">
  <span>Looooooooooooooooooooooooooooooooooooooooooooooooong Text</span>
</div>

<form>
  <div class="control">
    <label for="display">display:</label>
    <select name="display" id="display">
      <option value="flex">flex</option>
      <option value="inline-flex">inline-flex</option>
      <option value="grid">grid</option>
      <option value="inline-grid">inline-grid</option>
    </select>
  </div>
</form>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;

  color: #fff;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--gap);
  background: linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px),
    linear-gradient(
      180deg,
      rgba(84, 232, 220, 0.61) 0%,
      rgba(241, 231, 103, 0.61) 25%,
      rgba(240, 229, 104, 0.61) 50%,
      rgba(254, 182, 69, 0.61) 75%,
      rgba(250, 118, 47, 0.61) 100%
    );
  background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, 100% 100%;
  background-blend-mode: hard-light, overlay, screen, saturation;
  background-color: #557;
}

form {
  padding: 1rem;
  background-color: rgb(0 0 0 / 0.6);
  backdrop-filter: blur(20px);
}

.control {
  display: grid;
  grid-template-columns: 8em 1fr;
  gap: 5px;
  align-items: center;
}

.control:not(:last-child) {
  margin-bottom: 1rem;
}

.control label {
  width: min(8em, 100%);
  text-align: right;
}

form select {
  width: clamp(4em, 100%, 9em);
  background: rgb(255 255 255 / 0.3);
  outline: none;
  padding: 10px 2px 10px 10px;
  font-size: 1rem;
  color: #fff;
  text-shadow: 1px 1px 1px rgb(0 0 0 / 30%);
  border: 1px solid rgba(0, 0, 0, 0.3);
  font-family: "Exo", Arial, sans-serif;
  border-radius: 4px;
  box-shadow: inset 0 -5px 45px rgb(100 100 100 / 20%),
    0 1px 1px rgb(255 255 255 / 20%);
  transition: box-shadow 0.5s ease;
}

form select:focus {
  box-shadow: inset 0 -5px 45px rgb(100 100 100 / 40%),
    0 1px 1px rgb(255 255 255 / 20%);
  border-color: #0c69f3;
}

@media screen and (max-width: 768px) {
  body {
    grid-template-columns: auto;
    grid-template-rows: 1fr auto;
  }

  form {
    width: 100%;
  }
}
h1 {
  margin: 0;
}

.text--overflow {
  padding-block: 1rem;
  padding-inline: 1rem;
  max-inline-size: 30ch;

  border-radius: 0.25em;
  background-color: #0006;
  backdrop-filter: blur(20px);
  font-size: clamp(1rem, 1.2rem + 1vw, 1.5rem);
  margin: auto;
}

.text--overflow {
  --display: flex;
  display: var(--display);
}

.text--overflow > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

const textContainer = document.querySelector(".text--overflow");
const selects = document.querySelectorAll("select");

selects.forEach((select) => {
  select.addEventListener("change", (etv) => {
    textContainer.style.setProperty(
      `--${etv.target.id}`,
      `${etv.target.value}`
    );
  });
});