Con CSS, use "..." para el bloque desbordado de líneas múltiples

303

con

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

"..." se mostrará al final de la línea si se desborda. Sin embargo, esto se mostrará solo en una línea. Pero me gustaría que se muestre en varias líneas.

Puede verse así:

+--------------------+
|abcde feg hij   dkjd|
|dsji jdia js ajid  s|
|jdis ajid dheu d ...|/*Here it's overflowed, so "..." is shown. */
+--------------------+
Ovilia
fuente
3
Si estas son líneas separadas, realmente solo debe preocuparse por hacer una línea y repetir la funcionalidad para cada línea. Si todas estas líneas pertenecen a la misma oración, probablemente deberías mantener los puntos suspensivos solo en la última línea. Si usa puntos suspensivos a la mitad de una oración, esencialmente está haciendo un agujero en su oración.
Wex
44
un buen artículo sobre este tema css-tricks.com/line-clampin
Adrien Be
Consulte el siguiente enlace para obtener mi respuesta: stackoverflow.com/questions/536814/…
Shishir Arora
Respondí esto con muy buenos detalles con una solución CSS pura aquí . Funciona de manera confiable. Como se mencionó en esa respuesta, esto es mucho más fácil de lograr con Javascript, pero si eso está fuera de la mesa, esto funciona .
dashard

Respuestas:

84

También hay varios complementos de jquery que se ocupan de este problema, pero muchos no manejan varias líneas de texto. Siguientes trabajos:

También hay algunas pruebas de rendimiento .

Jim Thomas
fuente
57
No he visto ninguna solución CSS pura para este requisito
Jim Thomas
@Ovilia tenga en cuenta que la solución de Jim también incluye un complemento jQuery llamado jquery.autoellipsis.js, tendrá que descargar una inclusión por separado
Jeff
77
Tutorial de elipsis multilínea css: mobify.com/dev/multiline-ellipsis-in-pure-css
Julien
2
Queridas personas del futuro: este complemento es mi favorito, ya que permite alternar la visualización del texto oculto. http://keith-wood.name/more.html
brichins
1
Todas las bibliotecas que he agregado son buenas. Las pruebas de rendimiento pueden ayudarlo a decidir, pero me gustaría mencionar que generalmente estamos implementando dotdotdot debido a su amplia gama de configuración y código limpio, fácil de modificar. (Tenga en cuenta que esto es solo un punto de vista personal, que no pertenece a la respuesta.)
Milan Jaros
58

He pirateado hasta que logré lograr algo parecido a esto. Viene con algunas advertencias:

  1. No es puro CSS; tienes que agregar algunos elementos HTML. Sin embargo, no se requiere JavaScript.
  2. La elipsis está alineada a la derecha en la última línea. Esto significa que si su texto no está alineado o justificado a la derecha, puede haber una brecha notable entre la última palabra visible y los puntos suspensivos (dependiendo de la longitud de la primera palabra oculta).
  3. El espacio para los puntos suspensivos siempre está reservado. Esto significa que si el texto cabe en el cuadro casi con precisión, puede truncarse innecesariamente (la última palabra está oculta, aunque técnicamente no tendría que hacerlo).
  4. Su texto debe tener un color de fondo fijo, ya que estamos usando rectángulos de colores para ocultar los puntos suspensivos en los casos en que no es necesario.

También debo tener en cuenta que el texto se dividirá en un límite de palabra, no en un límite de caracteres. Esto fue deliberado (ya que lo considero mejor para textos más largos), pero como es diferente de lo que text-overflow: ellipsishace, pensé que debería mencionarlo.

Si puede vivir con estas advertencias, el HTML se ve así:

<div class="ellipsify">
    <div class="pre-dots"></div>
    <div class="dots">&hellip;</div>
    <!-- your text here -->
    <span class="hidedots1"></span>
    <div class="hidedots2"></div>
</div>

Y este es el CSS correspondiente, utilizando el ejemplo de un cuadro de 150 píxeles de ancho con tres líneas de texto sobre un fondo blanco. Se supone que tiene un restablecimiento de CSS o similar que establece los márgenes y rellenos a cero cuando sea necesario.

/* the wrapper */
.ellipsify {
    font-size:12px;
    line-height:18px;
    height: 54px;       /* 3x line height */
    width: 150px;
    overflow: hidden;
    position: relative; /* so we're a positioning parent for the dot hiders */
    background: white;
}

/* Used to push down .dots. Can't use absolute positioning, since that
   would stop the floating. Can't use relative positioning, since that
   would cause floating in the wrong (namely: original) place. Can't 
   change height of #dots, since it would have the full width, and
   thus cause early wrapping on all lines. */
.pre-dots {
    float: right;
    height: 36px;  /* 2x line height (one less than visible lines) */
}

.dots {
    float: right; /* to make the text wrap around the dots */
    clear: right; /* to push us below (not next to) .pre-dots */
}

/* hides the dots if the text has *exactly* 3 lines */
.hidedots1 {
    background: white;
    width: 150px;
    height: 18px;       /* line height */
    position: absolute; /* otherwise, because of the width, it'll be wrapped */
}

/* hides the dots if the text has *less than* 3 lines */
.hidedots2 {
    background: white; 
    width: 150px;
    height: 54px;       /* 3x line height, to ensure hiding even if empty */
    position: absolute; /* ensures we're above the dots */
}

El resultado se ve así:

imagen del resultado representado con diferentes longitudes de texto

Para aclarar cómo funciona, aquí está la misma imagen, excepto que .hidedots1está resaltada en rojo y .hidedots2en cian. Estos son los rectángulos que ocultan los puntos suspensivos cuando no hay texto invisible:

la misma imagen que la anterior, excepto que los elementos auxiliares están resaltados en color

Probado en IE9, IE8 (emulado), Chrome, Firefox, Safari y Opera. No funciona en IE7.

balpha
fuente
99
Usted realmente no necesita los 4 elementos html, siempre your textestá envuelto con <p>las etiquetas (como debe ser), entonces usted puede utilizar .ellipsify p:beforey .ellipsify p:afterluego, por supuesto, usted necesita .ellipsify p:before{content:"\2026";}el \2026es el código de la elipsis, también, puede ser necesario content:" ";ya que puede que no funcione para los elementos vacíos
Val
2
Aunque no creo que esta respuesta se adapte a muchas situaciones, se proporciona al menos una respuesta que no sea un complemento ni JavaScript. Eso y el ingenio que se utilizó en la construcción de esta respuesta es la razón por la que la estoy +1utilizando.
VoidKing
@MichalStefanow Solo uno: para el que lo creé: las descripciones de las "tarjetas" de la aplicación en Apptivate.MS, por ejemplo, ver apptivate.ms/users/1141291/blynn .
balpha
@Pavlo, me gusta mucho tu solución. Pero parece funcionar solo con texto estándar dado, no si cargo el texto de una base de datos, porque el script no conoce la altura externa del texto cargado.
JonSnow
2
@SchweizerSchoggi, pseudoelementos o no, esta solución no se basa en JS. No debería importar de dónde obtiene el texto si lo implementa correctamente.
Pavlo
41

Aquí hay un artículo reciente de css-tricks que discute esto.

Algunas de las soluciones en el artículo anterior (que no se mencionan aquí) son

1) -webkit-line-clampy 2) Coloque un elemento absolutamente posicionado en la parte inferior derecha con desvanecimiento

Ambos métodos suponen el siguiente marcado:

<div class="module"> /* Add line-clamp/fade class here*/
  <p>Text here</p>
</div>

con css

.module {
  width: 250px;
  overflow: hidden;
}

1) -webkit-line-clamp

FIDDLE de abrazadera de línea (... para un máximo de 3 líneas)

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  max-height: 3.6em; /* I needed this to get it to work */
}

2) desaparecer

Digamos que establece la altura de la línea en 1.2em. Si queremos exponer tres líneas de texto, podemos hacer que la altura del contenedor sea 3.6em (1.2em × 3). El desbordamiento oculto ocultará el resto.

Desaparecer FIDDLE

p
{
    margin:0;padding:0;
}
.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.fade {
  position: relative;
  height: 3.6em; /* exactly three lines */
}
.fade:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 1.2em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

Solución # 3 - Una combinación usando @supports

Podemos usar @supports para aplicar la pinza de línea de webkit en los navegadores webkit y aplicar la eliminación gradual en otros navegadores.

@Soporta abrazadera de línea con violín de retorno de fundido

<div class="module line-clamp">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

CSS

.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.line-clamp {
      position: relative;
      height: 3.6em; /* exactly three lines */
    }
.line-clamp:after {
      content: "";
      text-align: right;
      position: absolute;
      bottom: 0;
      right: 0;
      width: 70%;
      height: 1.2em;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
 }

@supports (-webkit-line-clamp: 3) {
    .line-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;  
        max-height:3.6em; /* I needed this to get it to work */
        height: auto;
    }
    .line-clamp:after {
        display: none;
    }
}
Danield
fuente
@ HP's411 En firefox, verá un efecto de desvanecimiento en lugar de puntos suspensivos
Danield,
34

El siguiente enlace proporciona una solución HTML / CSS pura para este problema.

Soporte de navegador: como se indica en el artículo:

Hasta ahora hemos probado en Safari 5.0, IE 9 (debe estar en modo estándar), Opera 12 y Firefox 15.

Los navegadores más antiguos seguirán funcionando bastante bien, ya que la carne del diseño tiene propiedades normales de posicionamiento, margen y relleno. Si su plataforma es anterior (por ejemplo, Firefox 3.6, IE 8), puede usar el método pero rehacer el gradiente como una imagen PNG independiente o un filtro DirectX.

http://www.mobify.com/dev/multiline-ellipsis-in-pure-css

el css:

p { margin: 0; padding: 0; font-family: sans-serif;}

.ellipsis {
    overflow: hidden;
    height: 200px;
    line-height: 25px;
    margin: 20px;
    border: 5px solid #AAA; }

.ellipsis:before {
    content:"";
    float: left;
    width: 5px; height: 200px; }

.ellipsis > *:first-child {
    float: right;
    width: 100%;
    margin-left: -5px; }        

.ellipsis:after {
    content: "\02026";  

    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;

    float: right; position: relative;
    top: -25px; left: 100%; 
    width: 3em; margin-left: -3em;
    padding-right: 5px;

    text-align: right;

    background: -webkit-gradient(linear, left top, right top,
        from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);           
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); }

el html:

<div class="ellipsis">
    <div>
        <p>Call me Ishmael.  Some years ago &ndash; never mind how long precisely &ndash; having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.  It is a way I have of driving off the spleen, and regulating the circulation.  Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off &ndash; then, I account it high time to get to sea as soon as I can.</p>  
    </div>
</div>

el violín

(cambiar el tamaño de la ventana del navegador para probar)

Kevin
fuente
2
"Hasta ahora hemos probado ..." ¿todo menos Chrome?
stevenspiel
Prueba aprobadaChrome for Mac Version 48.0.2564.116
Adrien Be
21

Después de revisar la especificación W3 para desbordamiento de texto , no creo que esto sea posible usando solo CSS. Ellipsis es una propiedad nueva, por lo que probablemente aún no ha recibido mucho uso o comentarios.

Sin embargo, este tipo parece haber hecho una pregunta similar (o idéntica), y alguien pudo encontrar una buena solución de jQuery. Puede demostrar la solución aquí: http://jsfiddle.net/MPkSF/

Si javascript no es una opción, creo que puede que no tengas suerte ...

Jeff
fuente
3
¿Bastante nuevo? MSIE lo apoyó desde IE6. Hoy, todos los navegadores lo admiten, excepto Firefox .
Christian
Llamaría a cualquier propiedad CSS3 que no esté implementada globalmente "new-ish". Es solo una cuestión de semántica. Además, ¿te das cuenta de que estás comentando una publicación que tiene casi un año?
Jeff
55
No es CSS3, ha estado allí por años y ha sido ampliamente adoptado. Solo la especificación puede considerarse nueva. Además, si SO no quisiera comentarios sobre hilos antiguos, podrían haberlo deshabilitado.
Christian
10

Solo quiero agregar a esta pregunta por completo.

Mate
fuente
Parece que se -o-ellipsis-lastlinepudo haber eliminado cuando Opera cambió a WebKit. Dejando la bala para fines históricos.
Matt
8

Gran pregunta ... Desearía que hubiera una respuesta, pero esto es lo más cercano que puedes obtener con CSS en estos días. Sin puntos suspensivos, pero aún bastante utilizable.

overflow: hidden;
line-height: 1.2em;
height: 3.6em;      // 3 lines * line-height
Adam Fraser
fuente
en realidad, la respuesta de Kevin es lo más cercano que puedes obtener con CSS en estos días stackoverflow.com/a/14248844/759452
Adrien Be
7

He encontrado esta solución css (scss) que funciona bastante bien. En los navegadores webkit muestra los puntos suspensivos y en otros navegadores solo trunca el texto. Lo cual está bien para mi uso previsto.

$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 3;

h2 {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Un ejemplo del creador: http://codepen.io/martinwolf/pen/qlFdp

Nikola Lajic
fuente
-webkit-line-clampcompatibilidad con navegadores caniuse.com/#search=-webkit-line-clamp
Adrien Be
6

Aquí está la solución más cercana que podría obtener usando solo css.

HTML

<div class="ellipsis"> <span>...</span>
Hello this is Mr_Green from Stackoverflow. I love CSS. I live in CSS and I will never leave working on CSS even my work is on other technologies.</div>

CSS

div {
    height: 3em;
    line-height: 1.5em;
    width: 80%;
    border: 1px solid green;
    overflow: hidden;
    position: relative;
}
div:after {
    content:". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
    background-color: white;
    color: white;
    display: inline;
    position: relative;
    box-shadow: 8px 1px 1px white;
    z-index: 1;
}
span {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: white;
}

Working Fiddle ( cambie el tamaño de la ventana para verificar )

Enlace a mi blog para explicación

Fiddle actualizado

Espero que ahora algún experto en CSS tenga idea de cómo hacerlo perfecto. :)

SR verde
fuente
Esa respuesta me está dando dolor de estómago. En primer lugar, no utiliza puntos suspensivos tipográficamente disponibles ... (es un símbolo de fuente que ocupa un espacio). Compare smashingmagazine.com/2008/08/11/top-ten-web-typography-sins Y con su solución, realmente no puede controlar dónde se queda la elipsis, por lo que puede llegar a situaciones indeseables, como puntos seguidos .
Volker E.
1
@VolkerE. Gracias por la información. Aquí está el violín actualizado . por favor avíseme si me falta algún punto en su explicación.
Mr_Green
Gran solución (la original), pero ¿por qué no usarla en div::beforelugar de eso span? :)
Adam
@ Adam, hubo un caso límite, así que no utilicé el pseudo elemento. ( No lo recuerdo ahora )
Mr_Green
5

Aquí hay muchas respuestas, pero necesitaba una que fuera:

  • CSS solamente
  • Preparado para el futuro (se vuelve más compatible con el tiempo)
  • No va a separar las palabras (solo se rompe en espacios)

La advertencia es que no proporciona puntos suspensivos para los navegadores que no admiten la -webkit-line-clampregla (actualmente IE, Edge, Firefox) pero sí utiliza un degradado para atenuar su texto.

.clampMe {
  position: relative;
  height: 2.4em; 
  overflow: hidden;
}

.clampMe:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 1.2em; /* Just use multiples of the line-height */
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%);
}

/* Now add in code for the browsers that support -webkit-line-clamp and overwrite the non-supportive stuff */
@supports (-webkit-line-clamp: 2) {
  .clampMe {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
  }
  
  .clampMe:after {
    display: none;
  }
}
<p class="clampMe">There's a lot more text in here than what you'll ever see. Pellentesque habitant testalotish morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

Puede verlo en acción en este CodePen y también puede ver una versión de Javascript aquí (no jQuery).

NilsyNils
fuente
4

Un poco tarde para esta fiesta, pero se me ocurrió, lo que creo, es una solución única. En lugar de tratar de insertar sus propios puntos suspensivos a través de css trickery o js, ​​pensé que intentaría rodar con la restricción de una sola línea. Así que duplico el texto para cada "línea" y solo uso una sangría de texto negativa para asegurarme de que una línea comience donde termina la última. VIOLÍN

CSS:

#wrapper{
    font-size: 20pt;
    line-height: 22pt;
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.text-block-line{
    height: 22pt;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    width: auto;
}
.text-block-line:last-child{
    text-overflow: ellipsis;
}

/*the follwing is suboptimal but neccesary I think. I'd probably just make a sass mixin that I can feed a max number of lines to and have them avialable. Number of lines will need to be controlled by server or client template which is no worse than doing a character count clip server side now. */
.line2{
    text-indent: -100%;
}
.line3{
    text-indent: -200%;
}
.line4{
    text-indent: -300%;
}

HTML:

<p id="wrapper" class="redraw">
    <span class="text-block-line line1">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line2">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line3">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line4">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
</p>

Más detalles en el violín. Hay un problema con el reflujo del navegador para el que uso un rediseño JS y así que échale un vistazo, pero este es el concepto básico. Cualquier idea / sugerencia es muy apreciada.

lupos
fuente
1
No me gusta la idea de duplicar cada línea de texto. Además, y si el texto es dinámico, no sabrá cuántas líneas agregar. Dicho esto, ¡+1 para esta solución única!
Danield
Gracias por la entrada :) El texto dinámico no es un problema. Básicamente, define la altura máxima del contenedor en la plantilla. Si desea limitarlo a 3 líneas, haga 3. Mi caso de uso tiene un título que puede ser 1-2 líneas y un extracto que puede ser 1-3. Esos son valores conocidos. No importa que tan larga sea la cuerda. Además, si hace esto en una situación de plantilla y no en html estático, puede hacer que maneje la sangría de texto negativa con un estilo en línea para que no necesite ese gran bloque de línea1, línea2, línea3, etc. un violín que usa la plantilla js como ejemplo.
lupos
Sería útil si la ruptura de palabras no es un problema en el proyecto.
Mr_Green
3

gracias @balpha y @Kevin, combino dos métodos juntos.

No se necesita js en este método.

puede usar background-imagey no se necesita degradado para ocultar puntos.

el innerHTMLde .ellipsis-placeholderno es necesario, yo uso .ellipsis-placeholderpara mantener el mismo ancho y alto con .ellipsis-more. Podrías usar display: inline-blocken su lugar.

.ellipsis {
    overflow: hidden;
    position: relative;
}
.ellipsis-more-top {/*push down .ellipsis-more*/
    content: "";
    float: left;
    width: 5px;
}
.ellipsis-text-container {
    float: right;
    width: 100%;
    margin-left: -5px;
}
.ellipsis-more-container {
    float: right;
    position: relative;
    left: 100%;
    width: 5px;
    margin-left: -5px;
    border-right: solid 5px transparent;
    white-space: nowrap;
}
.ellipsis-placeholder {/*keep text around ,keep it transparent ,keep same width and height as .ellipsis-more*/
    float: right;
    clear: right;
    color: transparent;
}
.ellipsis-placeholder-top {/*push down .ellipsis-placeholder*/
    float: right;
    width: 0;
}
.ellipsis-more {/*ellipsis things here*/
    float: right;
}
.ellipsis-height {/*the total height*/
    height: 3.6em;
}
.ellipsis-line-height {/*the line-height*/
    line-height: 1.2;
}
.ellipsis-margin-top {/*one line height*/
    margin-top: -1.2em;
}
.ellipsis-text {
    word-break: break-all;
}
<div class="ellipsis ellipsis-height ellipsis-line-height">
    <div class="ellipsis-more-top ellipsis-height"></div>
    <div class="ellipsis-text-container">
        <div class="ellipsis-placeholder-top ellipsis-height ellipsis-margin-top"></div>
        <div class="ellipsis-placeholder">
           <span>...</span><span>more</span>
        </div>
        <span class="ellipsis-text">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </span>
    </div>
    <div class="ellipsis-more-container ellipsis-margin-top">
        <div class="ellipsis-more">
            <span>...</span><span>more</span>
        </div>
    </div>
</div>

jsfiddler

Defims
fuente
2

la solución de JavaScript será mejor

  • obtener el número de líneas de texto
  • alternar is-ellipsisclase si la ventana cambia el tamaño o cambia el elemento

getRowRects

Element.getClientRects()funciona como este

ingrese la descripción de la imagen aquí

cada rectos en la misma fila tiene el mismo topvalor, así que descubra los rectos con un topvalor diferente , como este

ingrese la descripción de la imagen aquí

function getRowRects(element) {
    var rects = [],
        clientRects = element.getClientRects(),
        len = clientRects.length,
        clientRect, top, rectsLen, rect, i;

    for(i=0; i<len; i++) {
        has = false;
        rectsLen = rects.length;
        clientRect = clientRects[i];
        top = clientRect.top;
        while(rectsLen--) {
            rect = rects[rectsLen];
            if (rect.top == top) {
                has = true;
                break;
            }
        }
        if(has) {
            rect.right = rect.right > clientRect.right ? rect.right : clientRect.right;
            rect.width = rect.right - rect.left;
        }
        else {
            rects.push({
                top: clientRect.top,
                right: clientRect.right,
                bottom: clientRect.bottom,
                left: clientRect.left,
                width: clientRect.width,
                height: clientRect.height
            });
        }
    }
    return rects;
}

flotador ...more

como este

ingrese la descripción de la imagen aquí

detectar cambio de tamaño de ventana o elemento cambiado

como este

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

Defims
fuente
0

Una base de método CSS pura en -webkit-line-clamp:

@-webkit-keyframes ellipsis {/*for test*/
    0% { width: 622px }
    50% { width: 311px }
    100% { width: 622px }
}
.ellipsis {
    max-height: 40px;/* h*n */
    overflow: hidden;
    background: #eee;

    -webkit-animation: ellipsis ease 5s infinite;/*for test*/
    /**
    overflow: visible;
    /**/
}
.ellipsis .content {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    font-size: 50px;/* w */
    line-height: 20px;/* line-height h */
    color: transparent;
    -webkit-line-clamp: 2;/* max row number n */
    vertical-align: top;
}
.ellipsis .text {
    display: inline;
    vertical-align: top;
    font-size: 14px;
    color: #000;
}
.ellipsis .overlay {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /**
    overflow: visible;
    left: 0;
    background: rgba(0,0,0,.5);
    /**/
}
.ellipsis .overlay:before {
    content: "";
    display: block;
    float: left;
    width: 50%;
    height: 100%;

    /**
    background: lightgreen;
    /**/
}
.ellipsis .placeholder {
    float: left;
    width: 50%;
    height: 40px;/* h*n */

    /**
    background: lightblue;
    /**/
}
.ellipsis .more {
    position: relative;
    top: -20px;/* -h */
    left: -50px;/* -w */
    float: left;
    color: #000;
    width: 50px;/* width of the .more w */
    height: 20px;/* h */
    font-size: 14px;

    /**
    top: 0;
    left: 0;
    background: orange;
    /**/
}
<div class='ellipsis'>
    <div class='content'>
        <div class='text'>text text text text text text text text text text text text text text text text text text text text text </div>
        <div class='overlay'>
            <div class='placeholder'></div>
            <div class='more'>...more</div>
        </div>
    </div>
</div>

Defims
fuente
-1

Encontré un truco de JavaScript, pero tienes que usar la longitud de la cadena. Digamos que quieres 3 líneas de ancho de 250 px, puedes calcular la longitud por línea, es decir

//get the total character length.
//Haha this might vary if you have a text with lots of "i" vs "w"
var totalLength = (width / yourFontSize) * yourNumberOfLines

//then ellipsify
function shorten(text, totalLength) {
    var ret = text;
    if (ret.length > totalLength) {
        ret = ret.substr(0, totalLength-3) + "...";
    }
    return ret;
}
Tremmillicious
fuente
Lo más probable es que no usemos fuentes de ancho fijo en todas partes. Entonces este truco puede fallar en estas situaciones.
Ovilia