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

<form>
  <div class="control">
    <label for="display">display:</label>

    <select name="display" id="display">

      <optgroup label="display-outside">
        <option value="block">block</option>
        <option value="inline">inline</option>
        <option value="run-in">run-in</option>
      </optgroup>
      <optgroup label="display-inside">
        <option value="flow">flow</option>
        <option value="flow-root">flow-root</option>
        <option value="table">table</option>
        <option value="flex">flex</option>
        <option value="grid">grid</option>
        <option value="ruby">ruby</option>
      </optgroup>
      <optgroup label="display-listitem">
        <option value="list-item">list-item</option>
      </optgroup>
      <optgroup label="display-internal">
        <option value="table-row-group">table-row-group</option>
        <option value="table-header-group">table-header-group</option>
        <option value="table-footer-group">table-footer-group</option>
        <option value="table-row">table-row</option>
        <option value="table-cell">table-cell</option>
        <option value="table-column-group">table-column-group</option>
        <option value="table-column">table-column</option>
        <option value="table-caption">caption</option>
        <option value="ruby-base">ruby-base</option>
        <option value="ruby-text">ruby-text</option>
        <option value="ruby-base-container">ruby-base-container</option>
        <option value="ruby-text-container">ruby-text-container</option>
      </optgroup>
      <optgroup label="display-box">
        <option value="contents">contents</option>
        <option value="none">none</option>
      </optgroup>
      <optgroup label="display-legacy">
        <option value="inline-block">inline-block</option>
        <option value="inline-table">inline-table</option>
        <option value="inline-flex">inline-flex</option>
        <option value="inline-grid">inline-grid</option>
      </optgroup>
      <optgroup label="Global values">
        <option value="inherit">inherit</option>
        <option value="initial">initial</option>
        <option value="revert">revert</option>
        <option value="revert-layer">revert-layer</option>
        <option value="unset">unset</option>
        <option value="all">all</option>
      </optgroup>
    </select>
  </div>
  <div class="control">
    <label for="direction">direction:</label>
    <select name="direction" id="direction">
      <optgroup label="Keyword values">
        <option value="ltr">ltr</option>
        <option value="rtl">rtl</option>
      </optgroup>
      <optgroup label="Global values">
        <option value="inherit">inherit</option>
        <option value="initial">initial</option>
        <option value="revert">revert</option>
        <option value="revert-layer">revert-layer</option>
        <option value="unset">unset</option>
        <option value="all">all</option>
      </optgroup>
    </select>
  </div>
  <div class="control">
    <label for="writing-mode">writing-mode:</label>
    <select name="writing-mode" id="writing-mode">
      <optgroup label="Keyword values">
        <option value="horizontal-tb">horizontal-tb</option>
        <option value="vertical-rl">vertical-rl</option>
        <option value="vertical-lr">vertical-lr</option>
      </optgroup>
      <optgroup label="Global values">
        <option value="inherit">inherit</option>
        <option value="initial">initial</option>
        <option value="revert">revert</option>
        <option value="revert-layer">revert-layer</option>
        <option value="unset">unset</option>
        <option value="all">all</option>
      </optgroup>
    </select>
  </div>
  <div class="control">
    <label for="overflow">overflow:</label>
    <select name="overflow" id="overflow">
      <optgroup label="Keyword values">
        <option value="visible">visible</option>
        <option value="hidden">hidden</option>
        <option value="scroll">scroll</option>
        <option value="clip">clip</option>
        <option value="auto">auto</option>
      </optgroup>
      <optgroup label="Global values">
        <option value="inherit">inherit</option>
        <option value="initial">initial</option>
        <option value="revert">revert</option>
        <option value="revert-layer">revert-layer</option>
        <option value="unset">unset</option>
        <option value="all">all</option>
      </optgroup>
    </select>
  </div>
  <div class="control">
    <label for="text-overflow">text-overflow:</label>
    <select name="text-overflow" id="text-overflow">
      <optgroup label="Keyword values">
        <option value="clip">clip</option>
        <option value="ellipsis">ellipsis</option>
      </optgroup>

      <optgroup label="Global values">
        <option value="inherit">inherit</option>
        <option value="initial">initial</option>
        <option value="revert">revert</option>
        <option value="revert-layer">revert-layer</option>
        <option value="unset">unset</option>
        <option value="all">all</option>
      </optgroup>
    </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;
}

.layout {
  margin: auto;
  max-inline-size: 30ch;
}

.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: block;
  --direction: ltr;
  --text-overflow: clip;
  --writing-mode: horizontal-tb;
  --overflow: visible;
  display: var(--display);
  white-space: nowrap;
  overflow: var(--overflow);
  direction: var(--direction);
  writing-mode: var(--writing-mode);
  text-overflow: var(--text-overflow);
}

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}`
    );
  });
});