<div class="container">
  <h1>Enter your content</h1>
  <div class="text--overflow" dir="ltr">
    <p contenteditable>CSS is awesome, yes! 666(^_^)!</p>
  </div>
  <div class="text--overflow" dir="rtl">
    <p contenteditable>CSS رائع ، نعم!666 (^_^)!</p>
  </div>
</div>

<form>
  <div class="control">
    <label for="writing-mode">writing-mode:</label>
    <select name="writing-mode" id="writing-mode">
      <option value="horizontal-tb">horizontal-tb</option>
      <option value="vertical-rl">vertical-rl</option>
      <option value="vertical-lr">vertical-lr</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>

@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;
}

.container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  max-inline-size: 50vmax;
  align-items: center;
  justify-self: center;
}

.text--overflow {
  position: relative;
  padding-block: 1rem;
  padding-inline: 2rem;
  inline-size: min(100% - 1rem, 30ch);

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

.text--overflow p {
  min-block-size: 2em;
  line-height: 2em;
}

.text--overflow::after {
  content: "";
  position: absolute;
  inset-block: -1rem;
  inline-size: 1px;
  inset-inline-end: 2rem;
  border-inline-start: 1px dashed #09f;
}

:root {
  --writing-mode: horizontal-tb;
  --text--overflow: clip;
}

.container {
  writing-mode: var(--writing-mode);
}

.text--overflow p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: var(--text-overflow);
}

const root = document.documentElement;
const selects = document.querySelectorAll("select");

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