<div class="text--overflow">
  Looooooooooooooooooooooooooooooooooooooooooooooooong Text
</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>
  <div class="control">
    <label for="text-overflow">text-overflow:</label>
    <select name="text-overflow" id="text-overflow">
      <option value="clip">clip</option>
      <option value="ellipsis">ellipsis</option>
    </select>
  </div>
</form>

<div class="tutorials">
  <a href="https://s.juejin.cn/ds/idkVFyE1/" target="_blank">
    <svg t="1696988571607" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4422" width="200" height="200">
      <path d="M924.8 576.64v-115.2c12.8-13.44 13.44-26.88 12.8-34.56-3.2-30.08-36.48-42.24-47.36-46.72-79.36-30.08-226.56-89.6-307.84-122.88-49.28-24.32-65.28-19.84-113.28-0.64-12.8 5.12-224.64 83.84-306.56 117.76-44.8 18.56-51.2 46.08-51.2 61.44 0 25.6 17.92 48.64 50.56 62.08L259.84 537.6v257.28l8.32 8.32c3.84 3.84 91.52 92.16 252.16 92.16 150.4 0 236.16-88.96 240-92.8l7.68-8.32V540.16l36.48-15.36-1.28 52.48-29.44 49.28 88.96 84.48 98.56-85.76-36.48-48.64zM710.4 771.2c-22.4 18.56-88.96 67.2-190.08 67.2-111.36 0-179.84-48.64-202.88-67.2V561.28l144.64 58.88h0.64c46.08 17.28 81.28 16 125.44-3.2l122.24-51.84v206.08z m154.24-138.24l-17.92-16.64 13.44-22.4 2.56-102.4c4.48-14.08-0.64-25.6-8.32-32-7.68-7.04-21.76-11.52-36.48-2.56L565.12 563.84c-30.08 13.44-49.92 14.08-81.92 2.56l-298.88-121.6c-7.68-3.2-12.16-6.4-14.08-8.96 1.92-1.92 6.4-5.12 14.72-8.96 81.92-33.92 302.72-116.48 305.28-117.12h0.64c38.4-15.36 38.4-15.36 67.2-0.64l1.92 0.64c80.64 32.64 226.56 92.16 307.2 122.88v163.2l16 21.12-18.56 16z" p-id="4423"></path>
    </svg>
  </a>

</div>

@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;
  --text-overflow: clip;
  display: var(--display);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: var(--text-overflow);
}

.tutorials {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 9999;
  width: 64px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #3f517e;
  padding: 0.5rem;
  display: grid;
  place-content: center;
  transition: all 0.28s linear;

  &:hover {
    background: #4161b2;
  }

  & svg {
    display: block;
    width: 100%;
    height: 100%;
    filter: invert(1);
  }
}

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