0
168
ViewsCómo establecer la línea máxima de texto usando flex css react
tengo una pantalla como esta 
Pero en realidad no se ve tan bien si el título o el autor es tan largo, así que me pregunto cómo puedo establecer el máximo de línea de texto en un número fijo, ejemplo 3, ejemplo:
This very long long long This very long long long This very long long longEstarán
This very long long long This very long....Ya agregué esto a css:
max-width: 128px; max-lines: 3; font-size: 16px; color: grey; text-align: center; text-overflow: ellipsis;pero no trabajo
2 answers
Answer question0
El método que está probando solo funcionará con una línea de texto debido a las capacidades limitadas de css (eso es si espera que funcione dinámicamente y no manualmente)
Los siguientes estilos son los encargados de lograr ese efecto:
.overflow-wrap { white-space: nowrap; overflow: hidden; overflow-wrap: break-word; text-overflow: ellipsis; width: 250px; } <h1>Overflow wrap</h1> <p class="overflow-wrap">This text will be wrapped after a certain amount of words</p> <p>This text will not be wrapped after a certain amount of words</p>Para lograr el efecto que desea, hay una respuesta proporcionada aquí:
0
css max-lines "es una propuesta que aún no se admite en ninguna parte" según https://caniuse.com/sr_css-max-lines .
El css correcto usa la línea de sujeción de webkit que es bien compatible, excepto para IE. consulte https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
En tu caso usarías algo como:
{ width: 300px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }donde el valor de la abrazadera de línea es un código que especifica puntos suspensivos después de 3 líneas. Ese bloque se toma de un ejemplo en el enlace de MDN anterior, donde se puede encontrar más información.