html - poner - css puntos suspensivos en segunda línea

texto desbordado css

Question

text-overflow: ellipsis CSS text-overflow: ellipsis en segunda línea, ¿es esto posible? No puedo encontrarlo en la red.

ejemplo:

lo que quiero es así:

I hope someone could help me. I need 
an ellipsis on the second line of...

pero lo que está sucediendo es esto:

I hope someone could help me. I ... 

Answer 1

¡Qué lástima que no puedas hacer que funcione en dos líneas! Sería increíble si el elemento fuera un bloque de visualización y tuviera una altura establecida en 2em o algo así, y cuando el texto se desbordase, ¡mostraría puntos suspensivos!

Para un solo trazador de líneas puedes utilizar:

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

Para líneas múltiples, quizás podría usar un Polyfill como jQuery autoellipsis que está en github http://pvdspek.github.com/jquery.autoellipsis/

Answer 2

Como otros ya han respondido, una solución de CSS pura no existe. Hay un plugin jQuery que es muy fácil de usar, se llama dotdotdot . Utiliza el ancho y la altura del contenedor para calcular si necesita truncar y agregar puntos suspensivos.

$("#multilinedElement").dotdotdot();

Aquí hay un jsFiddle .

Answer 3

Descubrí que la respuesta de Skeep no era suficiente y también necesitaba un estilo de overflow :

overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;

Answer 4

Encontré una solución, sin embargo, necesitas saber una longitud aproximada del carácter que se ajuste a tu área de texto, y luego unir ... al espacio anterior.

La forma en que hice esto es:

1. asuma una longitud de carácter aproximada (en este caso 200) y pase a una función junto con su texto
2. divide los espacios para que tengas una larga cuerda
3. usa jQuery para obtener el primer "" espacio después de la longitud de tu personaje
4. únete al resto ...

código:

truncate = function(description){
        return description.split('''').slice(0, description.lastIndexOf(" ",200)).join('''') + "...";           
}

aquí hay un violín - http://jsfiddle.net/GYsW6/1/

Answer 5

Es un CSS no estándar, que no está cubierto en la versión actual de CSS (Firefox no lo admite). Intenta usar JavaScript en su lugar.

Answer 6

Esto debería funcionar en los navegadores webkit :

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

Answer 7

He usado el jQuery-condense-plugin antes, que parece que puede hacer lo que quieras. Si no, hay diferentes complementos que pueden adaptarse a sus necesidades.

Editar: Te hice una demo . jquery.condense.js en cuenta que jquery.condense.js el jquery.condense.js en la demostración que hace la magia, así que crédito total para el autor de ese complemento :)

Answer 8

Me he encontrado con este problema antes, y no hay una solución pura de CSS

Es por eso que he desarrollado una pequeña biblioteca para tratar este tema (entre otros). La biblioteca proporciona objetos para modelar y realizar el procesamiento de texto a nivel de letra. Puede, por ejemplo, emular un desbordamiento de texto: puntos suspensivos con un límite arbitrario (no es necesaria una línea)

Lea más en http://www.samuelrossille.com/home/jstext.html para captura de pantalla, tutorial y enlace de descarga.

Answer 9

No soy un profesional de JS, pero descubrí un par de formas en que podrías hacer esto.

El HTML:

<p id="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum consequat tortor et euismod. Nam commodo consequat libero vel lobortis. Morbi ac nisi at leo vehicula consectetur.</p>

Luego, con jQuery lo truncas a un conteo de caracteres específico pero dejas la última palabra así:

// Truncate but leave last word
var myTag = $(''#truncate'').text();
if (myTag.length > 100) {
  var truncated = myTag.trim().substring(0, 100).split(" ").slice(0, -1).join(" ") + "…";
  $(''#truncate'').text(truncated);
}

El resultado es así:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
elementum consequat tortor et ...

O bien, simplemente puede truncarlo a un recuento de caracteres específico como este:

// Truncate to specific character
var myTag = $(''#truncate'').text();
if (myTag.length > 15) {
  var truncated = myTag.trim().substring(0, 100) + "…";
  $(''#truncate'').text(truncated);
}

El resultado es así:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
elementum consequat tortor et euismod ...

Espero que esto ayude un poco.

Aquí está el jsFiddle .

Answer 10

Un requisito para text-overflow: ellipsis; de text-overflow: ellipsis; para trabajar es una versión de una línea de white-space ( pre , nowrap , etc.). Lo que significa que el texto nunca llegará a la segunda línea.

Es decir. No es posible en CSS puro.

Mi fuente cuando estaba buscando exactamente lo mismo ahora: http://www.quirksmode.org/css/textoverflow.html (Quirksmode ftw!)

EDITAR Si los buenos dioses de CSS implementarán http://www.w3.org/TR/css-overflow-3/#max-lines , podemos hacerlo en CSS puro utilizando fragments (nuevos) y max-lines (nuevos). También algo más de información en http://css-tricks.com/line-clampin/

EDIT 2 WebKit / Blink tiene line-clamp : -webkit-line-clamp: 2 pondrá puntos suspensivos en 2da línea.

Answer 11

aquí hay un buen example en pure css.

.container{
  width: 200px;
}
.block-with-text {
  overflow: hidden;
  position: relative; 
  line-height: 1.2em;
  max-height: 3.6em;
  text-align: justify;  
  margin-right: -1em;
  padding-right: 1em;
}
.block-with-text+.block-with-text{
  margin-top:10px;
}
.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;
}

<div class="container">


<div class="block-with-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy text ever since the 1500s, when an unknown printer took a
</div>

<div class="block-with-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>


<div class="block-with-text">
Lorem Ipsum is simply
</div>

</div>

Answer 12

si alguien está usando SASS / SCSS y tropieza con esta pregunta, tal vez este mixin podría ser de ayuda:

@mixin line-clamp($numLines : 1, $lineHeight: 1.412) {
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: block;
  /* autoprefixer: off */
  display: -webkit-box;
  -webkit-line-clamp: $numLines;
  -webkit-box-orient: vertical;
  max-height: $numLines * $lineHeight + unquote(''em'');
}

esto solo agrega la elipsis en los navegadores webkit. el resto simplemente lo corta.

Answer 13

una base de método pure css en -webkit-line-clamp, que funciona en webkit:

@-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>

Answer 14

Si alguien está tratando de hacer que la línea de clamp funcione en flexbox , es un poco más complicado, especialmente una vez que estás haciendo pruebas de tortura con palabras realmente largas. Las únicas diferencias reales en este fragmento de código son min-width: 0; en el elemento flexible que contiene texto truncado y word-wrap: break-word; . Un consejo para https://css-tricks.com/flexbox-truncated-text/ para obtener más información. Descargo de responsabilidad: esto sigue siendo un juego web solo hasta donde yo sé.

.flex-parent {
  display: flex;
}

.short-and-fixed {
  width: 30px;
  height: 30px;
  background: lightgreen;
}

.long-and-truncated {
  margin: 0 20px;
  flex: 1;
  min-width: 0;/* Important for long words! */
}

.long-and-truncated span {
  display: inline;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-wrap: break-word;/* Important for long words! */
}

<div class="flex-parent">
  <div class="flex-child short-and-fixed">
  </div>
  <div class="flex-child long-and-truncated">
    <span>asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd</span>
  </div>
  <div class="flex-child short-and-fixed">
  </div>
</div>

http://codepen.io/AlgeoMA/pen/JNvJdx (versión de codepen)