如何建立處理可變文字長度的響應式選取框效果？

選取框效果：解決長度可變性難題

在這個場景中，我們努力創建具有動態文字長度的選取框效果。傳統上，這是使用 CSS 屬性的特定值（例如「margin-left」）來實現的。然而，這種方法在處理不同長度的文字時存在不足。

幸運的是，有一個解決方案可以將我們的選取框從這些限制中解放出來。透過對HTML 進行輕微調整並在段落中加入span 元素，我們解鎖了更具適應性的解決方案：

<p></p>

接下來，我們為「marquee」和「span」類別定義CSS 規則。 「marquee」類別定義段落的寬度和樣式，而「span」類處理文字動畫：

.marquee {
  width: 450px;
  margin: 0 auto;
  overflow: hidden;
  box-sizing: border-box;
}

.marquee span {
  display: inline-block;
  width: max-content;
  padding-left: 100%;
  will-change: transform;
  animation: marquee 15s linear infinite;
}

對「width」和「padding-left」的調整允許選取框容納不同長度的文本，確保其平滑滾動而不會截斷任何內容。

但是，我們需要解決最後一個細微差別：可訪問性和使用者偏好。對於喜歡減少運動的用戶，我們應用媒體查詢規則來調整動畫行為。這可確保選取框尊重使用者的偏好：

@media (prefers-reduced-motion: reduce) {
  .marquee span {
    animation-iteration-count: 1;
    animation-duration: 0.01;
    width: auto;
    padding-left: 0;
  }
}

透過實施這些更改，我們實現了選取框效果，可以優雅地適應文字長度，同時也尊重使用者偏好。

以上是如何建立處理可變文字長度的響應式選取框效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！