Investigamos por diferentes foros para así traerte la respuesta a tu inquietud, si tienes alguna inquietud puedes dejarnos tu duda y responderemos con mucho gusto.
Solución:
Si desea aplicar puntos suspensivos (…) a un sola línea de textoCSS lo hace algo fácil con el text-overflow propiedad. Todavía es un poco complicado (debido a todos los requisitos, ver más abajo), pero text-overflow lo hace posible y confiable.
Sin embargo, si desea utilizar puntos suspensivos en texto multilínea – como sería el caso aquí – entonces no esperes divertirte. CSS no tiene un método estándar para hacer esto, y las soluciones alternativas son impredecibles.
Puntos suspensivos para texto de una sola línea
Con text-overflow, los puntos suspensivos se pueden aplicar a una sola línea de texto. Se deben cumplir los siguientes requisitos de CSS:
- debe tener un
width,max-widthoflex-basis - debe tener
white-space: nowrap - debe tener
overflowcon otro valor quevisible - debe ser
display: blockoinline-block
(o el equivalente funcional, como un elemento flexible).
Así que esto funcionará:
p
width: 200px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: 1px solid #ddd;
margin: 0;
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
jsVersión de violín
PERO, intente quitar el widtho dejar que el overflow por defecto a visibleo eliminando white-space: nowrapo usar algo que no sea un elemento contenedor de bloque, Y, los puntos suspensivos fallan miserablemente.
Una gran comida para llevar aquí: text-overflow: ellipsis no tiene efecto en el texto de varias líneas. (Él white-space: nowrap requisito por sí solo elimina esa posibilidad.)
p
width: 200px;
/* white-space: nowrap; */
height: 90px; /* new */
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: 1px solid #ddd;
margin: 0;
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
jsVersión de violín
Puntos suspensivos para texto de líneas múltiples
Debido a que CSS no tiene propiedades para los puntos suspensivos en el texto de varias líneas, se han creado varias soluciones alternativas. Varios de estos métodos se pueden encontrar aquí:
- jQuery punto punto punto…
- Line Clampin’ (truncamiento de texto de varias líneas)
- Puntos suspensivos de CSS: Cómo administrar puntos suspensivos de varias líneas en CSS puro
- Una solución CSS pura para el truncamiento de texto de varias líneas
El enlace de Mobify anterior se eliminó y ahora hace referencia a una copia de archive.org, pero parece estar implementado en este codepen.
Solo aumenta el -webkit-línea-abrazadera: 4; para aumentar el número de líneas
p
display: -webkit-box;
max-width: 200px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
Lorem ipsum dolor sit amet, novum menandri adversarium ad vim, ad his persius nostrud conclusionemque. Ne qui atomorum pericula honestatis. Te usu quaeque detracto, idque nulla pro ne, ponderum invidunt eu duo. Vel velit tincidunt in, nulla bonorum id eam, vix ad fastidii consequat definitionem.
Line clamp es un CSS (webkit) patentado y no documentado: https://caniuse.com/#feat=css-line-clamp, por lo que actualmente solo funciona en unos pocos navegadores.
Se eliminó la propiedad ‘display’ duplicada + se eliminó el ‘desbordamiento de texto: puntos suspensivos’ innecesarios.
Verifique este css para puntos suspensivos en texto de varias líneas
body
margin: 0;
padding: 50px;
/* mixin for multiline */
.block-with-text
overflow: hidden;
position: relative;
line-height: 1.2em;
max-height: 6em;
text-align: justify;
margin-right: -1em;
padding-right: 1em;
.block-with-text:before
content: '...';
position: absolute;
right: 0;
bottom: 0;
.block-with-text:after
content: '';
position: absolute;
right: 0;
width: 1em;
height: 1em;
margin-top: 0.2em;
background: white;
The Hitch Hiker's Guide to the Galaxy has a few things to say on the subject of towels. A towel, it says, is about the most massivelyuseful thing an interstellar hitch hiker can have. Partly it has great practical value - you can wrap it around you for warmth as you bound across the cold moons of Jaglan Beta; you can lie on it on the brilliant marble-sanded beaches of Santraginus V, inhaling the heady sea vapours; you can sleep under it beneath the stars which shine so redly on the desert world of Kakrafoon; use it to sail a mini raft down the slow heavy river Moth; wet it for use in hand-to-hand-combat; wrap it round your head to ward off noxious fumes or to avoid the gaze of the Ravenous Bugblatter Beast of Traal (a mindboggingly stupid animal, it assumes that if you can't see it, it can't see you - daft as a bush, but very ravenous); you can wave your towel in emergencies as a distress signal, and of course dry yourself off with it if it still seems to be clean enough. More importantly, a towel has immense psychological value. For some reason, if a strag (strag: non-hitch hiker) discovers that a hitch hiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, face flannel, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet weather gear, space suit etc., etc. Furthermore, the strag will then happily lend the hitch hiker any of these or a dozen other items that the hitch hiker might accidentally have "lost". What the strag will think is that any man who can hitch the length and breadth of the galaxy, rough it, slum it, struggle against terrible odds, win through, and still knows where his towel is is clearly a man to be reckoned with.