¿Cómo señalo texto largo en una columna fija más pequeña con CSS?

¿Cómo ajusto el texto largo en una columna de ancho fijo donde tengo espacio para solo una línea de texto? El texto debe cortarse en un ancho fijo (digamos a 100px) y me gustaría agregar puntos "..." al final. Algo como esto, por ejemplo:¿Cómo señalo texto largo en una columna fija más pequeña con CSS?

cadena dada:

Some really long string that I need to fit in there!

salida deseada en el ancho y columna fija debe ser:

Some really long string...

Fuente

2010-01-21 Primoz Rome

Usted puede hacer esto con CSS solo:

.box { 
    -o-text-overflow: ellipsis; /* Opera */ 
    text-overflow: ellipsis; /* IE, Safari (WebKit) */ 
    overflow:hidden;    /* don't show excess chars */ 
    white-space:nowrap;   /* force single line */ 
    width: 300px;     /* fixed width */ 
}

Nota: Usted tendrá que comprobar en el último soporte de navegador.

Fuente

2010-01-21 12:12:17 Gordon

fresco! Codifiqué una solución tipo trabajo antes de ver tu respuesta. https: //gist.github.com/708155 – geon

Esto: "text-overflow: ellipsis;" es todo lo que se necesita ahora en todas las versiones actuales de IE, Opera, Firefox, Chrome y Safari, por lo que solo necesita la solución alternativa (y "-o-text-overflow:") para una compatibilidad más antigua con el navegador. – GazB

¿Qué tal una solución de texto de varias líneas? Esto solo funcionará para una sola línea de texto. ¿Qué por ejemplo, si tengo lugar para 3 líneas de texto y digo que '...' se agrega en la última línea donde se recorta el texto? –

tuve un problema similar, la forma en que resolvió que era para quitar la cuerda a 60 caracteres y agregar un '...' al final de la misma.

¿Una solución fea? Sí, pero a menos que exista una solución jQuery, es probablemente la mejor opción.

Si está utilizando Smarty, así es como he resuelto el problema:

{$my_string|truncate:60}

Fuente

2010-01-21 11:24:50

Aquí es una función que utilizo para truncar cadenas. Como la mayoría de las sugerencias aquí, utiliza substr para truncar la cadena, pero evitará la división de la cadena mitad de una palabra:

function truncate_text($string, $min_chars, $append = ' &hellip;') { 
    $chars = strpos($string, " ", $min_chars); 
    $truncated_string = substr($string, 0, $chars) . $append; 
    return $truncated_rstring; 
}

Fuente

2010-01-21 11:46:48

creo textos sencillos de corte después de N caracteres no es lo que estás buscando . No es una solución porque el siguiente texto tiene una longitud de 15 caracteres: iiiiiiiiiiiiiii, mmmmmmmmmmmmmmm - observe que la segunda "palabra" es aproximadamente tres veces más larga que la primera.

JavaScript podría ser una solución:

En primer lugar preparar su margen de beneficio:
```
<p id="abc">{TEXT}</p> 
```
Dónde {TEXT} es su texto trunca a 150 caracteres + ...

Ahora bien, cuando Tenemos una buena base para JavaScript. Podemos intentar hacer lo que estás buscando:

<html> 
<head> 
    <style type="text/css"> 
     #abc { 
      width: 100px; 
     } 
    </style> 
    <script type="text/javascript"> 
     document.addEventListener("DOMContentLoaded", function() { 
      var ref = document.getElementById("abc"); 
      var text = ref.text; 

      ref.removeChild(ref.firstChild); 
      ref.appendChild(document.createTextNode("...")); 

      var maxHeight = ref.offsetHeight; 

      var pos = 0; 
      while (ref.offsetHeight <= maxHeight) { 
       var insert = text.substring(0, ++pos) + "..."; 

       var finalReplace = ref.replaceChild(document.createTextNode(insert), ref.firstChild); 
      } 

      ref.replaceChild(finalReplace, ref.firstChild); 
     }, false); 
    </script> 
</head> 
<body> 
    <p id="abc">My very, very, very, very, very, very, very long text...</p> 
</body> 
</html>

Fuente

2010-01-21 11:48:21 Crozin

Solo con algunas CSS como respuesta de Gordon. Acaba de añadir la propiedad display:block de un elemento en línea como <a> o <p>:

a#myText{ 
    display: block; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap; 
    width: 300px; 
}

se podría utilizar con muchas navegador como se puede ver en este enlace: http://caniuse.com/#search=text-overflow

Fuente

2014-09-04 10:39:50

¿Cómo señalo texto largo en una columna fija más pequeña con CSS?

Respuesta

Cuestiones relacionadas