Puntos suspensivos en medio de un texto (estilo Mac)

Mateo, miembro de este gran equipo, nos ha hecho el favor de redactar este artículo ya que domina muy bien este tema.

Solución:

En el HTML, coloque el valor completo en un dato personalizado-* attribute me gusta

Luego asigna load y resize detectores de eventos a una función de JavaScript que leerá los datos originales attribute y colóquelo en el innerHTML de su etiqueta de intervalo. Aquí hay un ejemplo de la función de puntos suspensivos:

function start_and_end(str) 
  if (str.length > 35) 
    return str.substr(0, 20) + '...' + str.substr(str.length-10, str.length);
  
  return str;

Ajuste los valores, o si es posible, hágalos dinámicos, si es necesario para diferentes objetos. Si tiene usuarios de diferentes navegadores, puede robar un ancho de referencia de un texto con la misma fuente y tamaño en cualquier otro lugar de su dominio. Luego interpole a una cantidad adecuada de caracteres para usar.

Un consejo también es tener una etiqueta abreviada en el mensaje … o who para que el usuario pueda obtener una información sobre herramientas con el mensaje completo. string.

something

Me gustaría proponer mi ejemplo para resolver este problema.

La idea principal es dividir el texto en dos partes pares (o la primera es más grande, si la longitud es impar) una de las cuales tiene puntos suspensivos al final y otra alineada a la derecha con text-overflow: clip.

Entonces, todo lo que necesita hacer con js, si desea que sea automático/universal, es dividir string y establecer attributes.

Sin embargo, tiene algunas desventajas.

1. No hay un buen envoltorio con palabras, o incluso letras (text-overflow: '' solo funciona en FF por el momento)
2. Si la división ocurre entre palabras, el espacio debe estar en la primera parte. De lo contrario, se colapsará.
3. Fin del string no debe tener ningún signo de exclamación, debido a direction: rtl – se moverán a la izquierda de la string. Creo que es posible arreglar esto poniendo la parte correcta de la palabra en la etiqueta y el signo de exclamación en el ::after pseudo-elemento. Pero aún no he hecho que funcione correctamente.

Pero, con todo esto, me parece genial, especialmente cuando arrastras el borde del navegador, lo que puedes hacer fácilmente en la página de jsfiddle: https://jsfiddle.net/extempl/93ymy3oL/. O simplemente ejecute el fragmento con ancho máximo fijo a continuación.

Gif debajo del spoiler:

body 
  max-width: 400px;


span::before, span::after 
  display: inline-block;
  max-width: 50%;
  overflow: hidden;
  white-space: pre;


span::before 
  content: attr(data-content-start);
  text-overflow: ellipsis;


span::after 
  content: attr(data-content-end);
  text-overflow: '';
  direction: rtl;

Así que a mi colega se le ocurrió una solución que no utiliza elementos dom adicionales. Verificamos si el div se desborda y agregamos un dato attribute de los últimos n caracteres. El resto se hace en css.

Aquí hay algo de HTML:

    
This is my text it is awesome


    
This is my text

Y el CSS:

.box 
    width: 200px;


.ellipsis:before 
    float: right;
    content: attr(data-tail);


.ellipsis 
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

Aquí está el jsfiddle obligatorio para esto: http://jsfiddle.net/r96vB/1/

Reseñas y puntuaciones

Te invitamos a añadir valor a nuestro contenido añadiendo tu experiencia en las ilustraciones.

---

---

Utiliza Nuestro Buscador