-2

Buenas tengo un texto dentro de una etiqueta p que ocupa mucho.

Me gustaria saber si se puede "truncar" en un punto en concreto.

Suponiendo que es un texto de 10 lineas, me gustaria cortarlo 4 cuatro lineas y añadir un boton (esto último se como hacerlo) para redirigir a otra pagina donde esta toda la información


edito:

Tengo un bloque < p > con diez lineas de texto que estraigo de un custom field (es una descripcion) al mostrarla el texto que enseña queda muy largo para el width que tiene (No puedo aumentar el width porque es un carrousel). La pregunta es este texto que tengo excesivamente largo se puede cortar a 3-4 lineas ?

6
  • No queda del todo claro lo que esperas hacer. ¿Quieres hacerlo solo por CSS? ¿Utilizas alguna librería CSS?
    – UHDante
    el 3 sep. 2018 a las 10:17
  • "Suponiendo que es un texto de 10 lineas, me gustaria cortarlo 4 cuatro lineas y añadir un boton (esto último se como hacerlo) para redirigir a otra pagina donde esta toda la información" ¿Solo sabes hacer lo del botón o también lo de tener solo 4 lineas y el botón con la re-dirección a la nueva página?
    – UHDante
    el 3 sep. 2018 a las 10:17
  • @UHDante editado me he explicado algo mal por las prisas
    – Caldeiro
    el 3 sep. 2018 a las 10:26
  • Echale un ojo a esto te puede servir php.net/manual/es/function.wordwrap.php el 3 sep. 2018 a las 10:37
  • Pregunta: ¿Al ajustar el String darías por válido que una frase se quedara a media? ejemplo: El tiempo de hoy en Ma.. <Leer más> - o necesitas que termine la frase ejemplo: El tiempo de hoy en Madrid. <Leer más>
    – UHDante
    el 3 sep. 2018 a las 10:44

4 respuestas 4

4

podrias tambien hacerlo simplemente del lado css agregando una clase a la descripcion, ejemplo:

.resumen{
  height: 100px;
  overflow: hidden;
   background-image: linear-gradient(to top, rgba(150,150, 150, 0) 0%, rgba(150, 150, 150, 0.1) 0px, rgba(200,200,200,0.01) 100px, rgba(200,200,200,0.1) 100%)
}
<html>

  <body>
    <label> descripcion: </label>
    <p class="resumen">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et </p><a href="#">Leer mas</a>
  </body>
</html>

O algo por el estilo :)

2

Para lo que planteas, lo que siempre he hecho es cortar el texto con una extensión determinada en el lado del servidor, bien contando palabras o mejor caracteres, controlando después que no se muestra una palabra a "medias" al final del texto que obtienes.

El problema viene de la concreción de tener que mostrar 4 líneas. Supongo que el diseño de tu página va a ser responsive (debería serlo), entonces si tienes un texto con una extensión determinada, deberás ajustar tanto el tamaño del contenedor del texto como de la fuente para tener esas 4 líneas en diferentes resoluciones, a partir de hay puedes poner una caja superpuesta con el botón y que se renderice sólo si el texto es demasiado largo (y por tanto tuviste que ajustarlo).

Si el ancho del texto es fijo, basta con cortar el texto demasiado largo y meter el párrafo en un div ajustando el tamaño de este al ancho máximo requerido.

Saludos.

1
  • si es responsive, la idea de "cortar el texto" es que tu lo leas y al no estar completo vayas a leer mas para rederigirte al articulo con información más extensa
    – Caldeiro
    el 3 sep. 2018 a las 11:20
1

Mira esta funcion lo hace por palabra

function tokenTruncate($string, $your_desired_width) {
  $parts = preg_split('/([\s\n\r]+)/', $string, null, PREG_SPLIT_DELIM_CAPTURE);
  $parts_count = count($parts);

  $length = 0;
  $last_part = 0;
  for (; $last_part < $parts_count; ++$last_part) {
    $length += strlen($parts[$last_part]);
    if ($length > $your_desired_width) { break; }
  }

  return implode(array_slice($parts, 0, $last_part));
}

Saludos :)

1
  • Muchas gracias, una vez acabado la pagina probare de cambiarlo por esto si me perjudica que se corten las palabras
    – Caldeiro
    el 3 sep. 2018 a las 11:19
0

Cojo la variable donde guardo el texto, cuento la cantidad de caracteres que tiene. ex: strlen($descripcion) esto me da "100 caracteres".

Multiplico esa cantidad por 0.4 quiero el 40% del total de caracteres.

Finalmente con substr($descripcion,0,$cantidad_caracteres_a_mostrar), me recorta un 60% la longitud del texto.

Usando PHP este es el código que me quego

$descripcion_caso = $casoexitoespecifico["descripcion"];
$cantidad_caracteres = strlen($descripcion_caso) * 0.4;
$descripcion_caso_breve = substr($descripcion_caso,0, $cantidad_caracteres);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.