"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > ¿Cómo controlar el ancho de las opciones del cuadro de selección e implementar puntos suspensivos del texto?

¿Cómo controlar el ancho de las opciones del cuadro de selección e implementar puntos suspensivos del texto?

Publicado el 2024-11-13
Navegar:567

How to Control the Width of Select Box Options and Implement Text Ellipsis?

Controlar el ancho de las opciones del cuadro de selección

En HTML, al aplicar atributos de estilo tanto al elemento de selección como a sus elementos de opción secundarios, es Es posible especificar el ancho de cada opción para garantizar que coincida con el ancho del cuadro de selección. Sin embargo, lograr esto solo con CSS puede no ser suficiente.

Una solución implica incorporar JavaScript para controlar aún más el ancho de la opción y habilitar los puntos suspensivos del texto cuando sea necesario. El código JavaScript proporcionado introduce una función shortString que ajusta dinámicamente el texto dentro de los elementos de opción que tienen la clase .short y el atributo de límite de datos.

A continuación se explica cómo implementar esta solución:



select {
  width: 250px;
}

option {
  width: 250px;
}

function shortString(selector) {
  const elements = document.querySelectorAll(selector);
  const tail = '...';
  if (elements && elements.length) {
    for (const element of elements) {
      let text = element.innerText;
      if (element.hasAttribute('data-limit')) {
        if (text.length > element.dataset.limit) {
          element.innerText = `${text.substring(0, element.dataset.limit - tail.length).trim()}${tail}`;
        }
      } else {
        throw Error('Cannot find attribute \'data-limit\'');
      }
    }
  }
}

window.onload = function() {
  shortString('.short');
};

Este enfoque garantiza que el ancho de la opción sea idéntico al ancho del cuadro de selección y, cuando el texto de la opción excede el límite especificado, el texto sobrante se reemplaza con puntos suspensivos.

Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3