Truncate texto en contenido escalable

Dividí página en 2 partes que lo he hecho usando "w-50" bootstrap(4) css class.

Todos los elementos de página(componentes) ya están creados y diseñados y funcionan como se espera excepto el texto(Lorem impsum dolor sit amet) que debe ser truncado basado en el espacio disponible.

He enumerado el tipo de componentes marcados anaranjado en la imagen subida. select - edad span - título img(estrella en este caso) - título div(tamaño fijo)

Cuando todos los demás elementos seleccionan, img(estrella), div(fixed) toma sus anchos respectivos, tenemos que truncar nuestro lapso (lorem ipsum).

¿Podría por favor proporcionar cualquier solución o sugerir un tema que debe ser investigado para archivar el resultado esperado?

JSFiddle: https://jsfiddle.net/AEMLoviji/umf6nzL3/6/

enter image description here

Pregunta hecha hace 3 años, 4 meses, 25 días - Por algorithmwizard

3 Respuestas:

  • UPDATE: Creado mi escenario personalizado para resolver el problema. Aparte de añadir algunos CSS adicionales, han utilizado un poco de Javascript así como para cumplir con las condiciones requeridas.

    Código de Trabajo:

    html

  
    Account Dashboard
    
    
    
    
    
    

    
  
  
    
    
      
    
        
    
          
    
            
    
              
    
                

                
    
                  
    
                    
                      Lorem ipsum There are no accidents Lorem ipsum dolor sit,
                      Lorem ipsum dolor sit amet.
                    
                    ...
                  
    
                  
    
                    
                  
    
                
    
              
    

              
    
                Fixed sized toolbar
              
    
            
    
          
    
          
    
            
    
              
    
                
    Any content goes here
    
              
    

              
    
                Fixed sized toolbar
              
    
            
    
          
    
        
    
      
    

      
    
        
    
           Left content 
        
    
        
    
           Right content

    Respondida el Dec 20, 2020 a las 17:00 - por bitwisewizard

    Votos positivos: 0 | Votos negativos: 0

  • Para truncar el texto de manera que se ajuste al espacio disponible en tu diseño, puedes utilizar la propiedad CSS text-overflow: ellipsis junto con overflow: hidden y white-space: nowrap. Esto hará que el texto se muestre con puntos suspensivos al final si excede el espacio disponible.

    Para aplicar esto a tu código, puedes agregar una clase de CSS a tu div que contiene el texto que quieres truncar. Por ejemplo:

    html

    Lorem impsum dolor sit amet

    Y luego en tu CSS, agrega el siguiente estilo:

    css
.texto-truncado {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}

    Esto hará que el texto se trunque de forma automática si excede el espacio disponible en el contenedor. Puedes ajustar el tamaño y estilos según tus necesidades.

    Además, te recomendaría revisar el uso de Flexbox en Bootstrap para tener más control sobre la distribución y alineación de los elementos en tu diseño. Puedes investigar más sobre Flexbox y cómo utilizarlo en conjunto con Bootstrap para lograr el diseño deseado.

    Respondida el Dec 21, 2020 a las 17:00 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Solución CSS:

    Puedes usar la propiedad text-overflow: ellipsis; en el elemento span que contiene el texto que quieres truncar. Esta propiedad hará que el texto se desborde con puntos suspensivos (...) cuando llegue al final del elemento contenedor.

    css
.text-truncated {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

    Agrega esta clase CSS al elemento span que contiene el texto:

    html
Lorem ipsum dolor sit amet

    Nota:

    La propiedad white-space: nowrap; evita que el texto se ajuste a la siguiente línea, lo que garantiza que se trunque dentro del elemento contenedor. La propiedad overflow: hidden; oculta cualquier texto que exceda el ancho del elemento contenedor.

    Alternativa de JavaScript:

    También puedes usar JavaScript para truncar el texto dinámicamente. Aquí tienes un ejemplo:

    javascript
const textElement = document.querySelector(".text-to-truncate");
const maxLength = 50; // Longitud máxima del texto truncado

if (textElement.textContent.length > maxLength) {
  textElement.textContent = textElement.textContent.substring(0, maxLength) + "...";
}

    Este script recorta el texto a la longitud máxima especificada y agrega puntos suspensivos al final.

    Consideraciones adicionales:

    Para una solución más flexible, puedes usar una biblioteca de JavaScript como FitText.js o Ellipsis.js. Si el texto que quieres truncar contiene etiquetas HTML, debes usar un analizador HTML para evitar que se trunque el marcado.

    Respondida el Dec 21, 2020 a las 17:02 - por Gemini

    Votos positivos: 0 | Votos negativos: 0