7

Estoy utilizando una function para acortar palabras, pero lo que realmente deseo es crear en la function es acortar cadena, sin cortar palabras

function getSubString($string, $length=NULL){
  //Si no se especifica la longitud por defecto es 50
  if ($length == NULL)
    $length = 15;
    //Primero eliminamos las etiquetas html y luego cortamos el string
    $stringDisplay = substr(strip_tags($string), 0, $length);
    //Si el texto es mayor que la longitud se agrega puntos suspensivos
    if (strlen(strip_tags($string)) > $length)
      $stringDisplay .= '...';
    return $stringDisplay;
}

//Veamos la ejecución de la misma.

$texto = "Este es un acortador de palabras, y yo deseo ser un acortador de cadenas no de palabras";

echo '<span>'.getSubString($product).'</span>';

El resultado el que se imprime es el siguiente:

Este es un acortador de p...

Al inspeccionar el código fuente con la herramienta de desarrollador del navegador que muestre lo siguiente:

<span>Este es un acortador de palabras, y yo deseo ser un acortador de cadenas no de palabras</span>

Actualización

Después de haber tenido tantas respuestas muy interesantes pero todas fallidas lastimosamente.

Se me ocurrió la idea mediante jQuery acotar la palabra y después unirla por ejemplo vamos a limitar los caracteres a mostrar de 10 de cualquier texto, tomando como ejemplo el siguiente texto *"php 7 basic" el resultado será el siguiente:

php 7...

Al inspeccionar el resultado con la herramienta de desarrollador del navegador se visualizará lo siguiente: (no es lo que pensaba) pero es lo más ideal

<h2 id="result">php 7...<h2 id="original" style="display: none;"> basic</h2></h2>

¿Por qué lo ideal? Porque así no mostrará a futuro en los motores de búsqueda un texto incompleto, ahora si le quitamos el display:none; mostrará esto:

php 7... basic

Y es perfecto pero existen dos problemas:

  • Está añadiendo id a la etiqueta h2 y al existir varios elementos a recortar esto no será válido para la validación correcta de HTML, la documentación de validación de HTML dice que no debe existir más de un contenido con el mismo id del mismo nombre, la solución es migrar el código jQuery de id a class en un articulo para class es utilizar .each() de sus funciones de jQuery.

  • El segundo error es que solo funciona con un solo elemento que contenga el id="original" si añado más de uno en el mismo documento solo acorta el primero el resto de los elementos no.

$(function() {
    var maxlength = 10;
    var dots = $('#original').text().length>maxlength?'...':'';
    var hello = $('#original').text().length>maxlength?$('#original').text().substring(0,maxlength).replace(/\W\w+\s*(\W*)$/, '$1'):$('#original').text();
    $('#original').before('<h2 id="result">'+hello+dots+'</h2>')
    $('#original').text($('#original').text().substring(hello.length))
    .css('display','none')
    .appendTo('#result');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2 id="original">php 7 basic</h2>

<h2 id="original">Otro texto de otro contenedor</h2>

<h2 id="original">Otro texto de otro contenedor dos</h2>

En la sección de javascript(jQuery) cambie esto ('#original') por esto $('.original') pero no funciono, al realizar aquellos cambios se repite el primer contenido e ignora el resto, se puede observar en el siguiente link https://jsfiddle.net/mrfndefx/

14
  • Que hace la variable $descripcion? Donde la declaraste?
    – Einer
    Commented el 20 ago. 2017 a las 17:26
  • @Einer la estoy tratando de implementar desde una consulta de la base de datos primero esta la consulta $descripcion = $row['descripcion']; luego el for ($i=150; $i>0; $i--) if ($descripcion[$i]==' ') break; pero no funciona muestra el mismo error tanto en querer mostrar desde la base de datos y el mismo error en este simple ejemplo el mismo error.
    – Otto
    Commented el 20 ago. 2017 a las 17:29
  • @Einer pensé que el problema prevenía desde la implementación desde la consulta de la base de datos, pero lo realice sin realizar una consulta tal como muestra el ejemplo pero muestra el mismo error.
    – Otto
    Commented el 20 ago. 2017 a las 17:32
  • Aparentemente antes del for no hay nada. Porque el error está dando en la línea #4 del archivo php. Seguro que estas definiendo la variable?
    – Einer
    Commented el 20 ago. 2017 a las 17:34
  • 2
    Estás tratando de acceder a una posición de la cadena que no existe. Primero, la variable $i se inicializa con el valor 150 y después estás tratando de acceder a la posición 150 de la cadena $descripcion cuando esta solo tiene 47 caracteres. Commented el 20 ago. 2017 a las 18:01

10 respuestas 10

3

Una solución seria utilizar wordwrap:

$descripcion = "HOLA MUNDO COMO ESTAS TE QUIERO AMOR DE MI VIDA";
$subDescripcion = wordwrap($descripcion, 70, " ", false);

echo $subDescripcion;

if(count($subDescripcion) < 70)
  echo "...";

Quizás habría que hacer un ajuste tipo comparar si es < (70-3) (el tres es por los tres puntos continuos), pero la función de wordwrap corta la frase con espacios respetando las palabras... Así no necesitáis el bucle, que puede daros problemas.

Documentación: http://php.net/manual/es/function.wordwrap.php

1
  • Me había olvidado de esta pregunta, ya la he actualizado explicando detalladamente cual es la idea :)
    – Otto
    Commented el 9 oct. 2017 a las 16:36
3

La idea que tienes no lo vas a conseguir solo con PHP ya que lo estás manipulando del lado del servidor y tendrías que trabajar con varios variables, una que te muestre el recortado y la otra con la cadena completa y luego tendrías que manipularlo al lado del cliente... ósea muchos pasos para poder hacerlo con CSS usando simplemente:

Ejemplo:

div { max-width: 210px; }

.recortar {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;    
}
<div>
  <p class="recortar">Desarrollo Web Completo con HTML5, CSS3, JS AJAX PHP y MySQL</p>
</div>

Edit: (según los comentarios)

Si quieres usar el efecto de Udemy tienes que usar la propiedad -webkit-line-clamp (caniuse.com)

Propietaria y indocumentado que contendrá texto a una cantidad determinada de líneas cuando se use en combinación con display: -webkit-box. Con text-overflow: ellipsis terminará el texto con elipsis.

Si estás en un navegador que soporta esa propiedad no vas a tener problema, prueba de ver Udemy en FF y verás que el efecto desaparece.... peeeeero no seriamos SOes si no hubiera una solución para ello.

Mejor dicho un Fallback, para eso verificamos si soporta -webkit-line-clamp con @supports (...y SI... @supports no esta soportado en los navegadores (viejos) de IE), en caso que no soporta -webkit-line-clamp, ponemos un efecto gradiente sobre el texto cual simula la desaparición del mismo... en caso contrario muestra el elipsis (...)

En puro CSS:

.wrp {
  width: 35%;
  margin: auto;
}

.item {
  border: 1px solid #ccc;
  padding: 0 10px;
  background: #fff;  
}

/* Fallback para los navegadores que no soportan -webkit- */
/* En vez de mostrar un elipsis (...) le ponemos un efecto gradiente encima del texto */
.recortar {
  font-size: 16px; /* Juega si quieres con el tamaño ...del font claro */
  min-height: 16px;
  position: relative;
  overflow: hidden;
}

.recortar:after {
  content: '';
  width: 40%;
  height: 16px;
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;  
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%);
}

@supports (-webkit-line-clamp: 2) {
  .recortar {      
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;      
  }
  
  .recortar:after {
    display: none;
  }
}
<div class="wrp">
  <div class="item">
    <p class="recortar">Illustrator CC para novatos: ¡desde cero hasta experto! Y no cuesta prácticamente nada!</p>
  </div>
</div>

Otro ejemplo sería usar un poco de JS (código original), aquí lo recortamos indicando la longitud deseada sin recortar en medio de la palabra y después agrega un link tipo elipsis para mostrar el resto de texto:

var longitud = 40;
var p = document.querySelector('.recortar');

if ( p ) {
    
  var truncar = p.innerHTML;
    
  if ( truncar.length > longitud ) {

    // Truncamos el contenido, volviendo al final de la palabra anterior
    // para asegurarnos de no recortar en medio de una palabra
    truncar = truncar.substring(0, longitud);    
    truncar = truncar.replace(/\w+$/, '');

    // Añadir un elipses al final y convertirlo en un enlace
    // que expande el párrafo de nuevo a su tamaño original
    truncar += '<a href="#" onclick="this.parentNode.innerHTML=' +
      'unescape(\''+escape(p.innerHTML)+'\');return false;">...<\/a>';
      
    p.innerHTML = truncar;
  }
}
.wrp {
  width: 35%;
  margin: auto;
}

.item {
  border: 1px solid #ccc;
  padding: 0 10px;
  background: #fff;  
}
<div class="wrp">
  <div class="item">
    <p class="recortar">Illustrator CC para novatos: ¡desde cero hasta experto! Y no cuesta prácticamente nada!</p>
  </div>
</div>

7
  • El ejemplo es perfecto pero lo malo es que no se puede controlar por decir en cuantos caracteres querer mostrar esto (...) y solo funciona esto (...) al darle un determinado width mira este ejemplo yo quiero mostrar lo que se encuentra comentado en el área HTML sin tener que cambiar el width de mi contenido así como lo muestra udemy por ejemplo.
    – Otto
    Commented el 10 oct. 2017 a las 20:36
  • @J.Doe - Mira la edición... saludos Commented el 10 oct. 2017 a las 22:26
  • y no puede ser con jQuery la mayor parte de mi código que depende de algo más allá de estilos está con jQuery para no dañar la fachada puedes darme un ejemplo con jQuery si no es mucho pedir :)
    – Otto
    Commented el 10 oct. 2017 a las 22:32
  • gracias :) si lo puedes hacer lo más sencillo que puedas mucho mejor :)
    – Otto
    Commented el 10 oct. 2017 a las 22:37
  • @J.Doe - Aquí tienes el ejemplo en jQuery... Commented el 10 oct. 2017 a las 22:58
2
+50

La verdad me ha parecido muy curiosas tu duda, creo entender lo siguiente:

  • Deseas truncar una cadena a un máximo de caracteres determinado.
  • Deseas que las palabras visibles estén completas.
  • Deseas visualizar el texto completo una vez veas el código fuente.
  • No deseas incrustar por medio de javascript mas contenido en el cuerpo del DOM.

Basado en estas premisas, descartamos PHP como solución, y teniendo en cuenta que no deseas incrustar etiquetas dinámicamente parece que la solución mas viable es a través de CSS, pero debido a que quieres controlar el numero de caracteres máximo a visualizar por si solo CSS es insuficiente. Así que te puedo sugerir la siguiente alternativa:

function generadorAfterCss(selector, contenido) {
  $("head").append(`<style>
  ${selector} {
    font-size: 0;
  }
  ${selector}:after {
    content: "${contenido}";
    font-size: 12px;
  }</style>`);
};

function truncarCadenaConPalabraCompleta(cadena, tamaño, elipse) {
  if (cadena.length <= tamaño) {
    return cadena;
  }
  var elipse = elipse || "...";
  var caracteres = 0;
  var arreglo = cadena.split(" ");
  for (i in arreglo) {
    caracteres += arreglo[i].length;
    if (caracteres > tamaño) {
      arreglo.splice(i, arreglo.length);
    }
    caracteres++;
  }
  return arreglo.join(" ") + elipse;
}

function truncarContenidoDOM(selector, tamaño, elipse) {
  var contenido = $(selector).text();
  var resultado = truncarCadenaConPalabraCompleta(contenido, tamaño, elipse);  
  generadorAfterCss(selector, resultado);    
}

truncarContenidoDOM(".recorte-10", 10);
truncarContenidoDOM(".recorte-13", 13);
truncarContenidoDOM(".recorte-15", 15);
truncarContenidoDOM(".recorte-20", 20);
truncarContenidoDOM(".recorte-100", 100);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="recorte-10">esto un texto muy largo que deberia verse completo en el inspector</p>
<p class="recorte-13">esto un texto muy largo que deberia verse completo en el inspector</p>
<p class="recorte-15">esto un texto muy largo que deberia verse completo en el inspector</p>
<p class="recorte-20">esto un texto muy largo que deberia verse completo en el inspector</p>
<p class="recorte-100">esto un texto muy largo que deberia verse completo en el inspector</p>

Tengo claro que es posible optimizar lo anterior pero trato de mostrarte la idea de manera sencilla. El uso de la pseudoclase :after no requiere de incrustar mas contenido al rededor de tus párrafos y al ser dinámico puedes manipular el texto que te muestra.


Propuesta basada en el algoritmo de la pregunta

$('.original').each(function() {
    var $original = $(this);
    var maxlength = 10;
    var dots = ($original.text().length > maxlength) ? '...' : '';
    var hello = ($original.text().length > maxlength) ?
    $original.text()
    .substring(0,maxlength)
    .replace(/\W\w+\s*(\W*)$/, '$1') : 
    $original.text();
    $original.replaceWith(`<h2 class="result">
      ${hello+dots}
      <span style="display:none">
      ${$original.text().substring(hello.length)}
      </span>
    </h2>`);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2 class="original">php 7 basic</h2>
<h2 class="original">Otro texto de otro contenedor</h2>
<h2 class="original">Otro texto de otro contenedor dos</h2>

Espero que te sea de utilidad.

6
  • me parece mucho código, porque no dar una posible solución a mi código??? mi código funciona perfectamente el problema está que no me permite acortar a más de un elemento solo me permite el primero y debe pasar su contenido a class porque no debe haber el mismo id con el mismo nombre en una sola página eso dice la validación de código HTML pero si puede haber repetidos estilos con class con el mismo nombre.
    – Otto
    Commented el 12 oct. 2017 a las 0:43
  • Disculpa, pero no entiendo muy bien... como lo has dicho el problema es que tienes varios elementos con el mismo identificador #original cuando bien es sabido que no es correcto, si tu código funciona bien lo único que tienes que cambiar son los id="original" por class="original" y en la sección de javascript usar el selector $('.original') y funcionaría para todos.
    – NekoOs
    Commented el 12 oct. 2017 a las 0:50
  • actualice nuevamente mi pregunta espero ahora sea más clara, si lo intente lo que me dices pero no funciona observa jsfiddle.net/mrfndefx
    – Otto
    Commented el 12 oct. 2017 a las 1:04
  • He editado la respuesta basándome en tu algoritmo, el problema es que debes recorrer los diferentes elementos jsfiddle.net/nekoos/mrfndefx/1
    – NekoOs
    Commented el 12 oct. 2017 a las 1:31
  • como amigo no entiendo, puedes explicarme lo que me indicas
    – Otto
    Commented el 12 oct. 2017 a las 1:35
2

Hace tiempo implementé la siguiente función para recortar cadenas a una cierta longitud, respetando palabras completas, puedes incluir un trozo de html y también verifica que los puntos suspensivos no estén precedidos de otros signos de puntuación.

/*
    Función que recorta $string a una cierta cantidad de $chars
    y les agrega $elipsis
*/
function string_cut($string, $chars = 100, $elipsis = '...') {
    // elimino tags y returns y separo en cadenas de $chars caracteres (o menos)
    // luego tokenizo las cadenas con el caracter "\n", el mismo que usé
    // antes para separar la cadena
    $cut = strtok(wordwrap(strip_tags(nl2br($string)), $chars,"\n"), "\n");

    // elimino puntuaciones y espacios finales
    $cut = rtrim($cut, " \t\n\r\0\x0B,;.?-");

    // si la longitud de la cadena es mayor que la longitud del recorte
    // y la longitud del recorte es mayor que 0, agrego $elipsis
    if(strlen($string)>strlen($cut) && strlen($cut)>0){
        $cut .= $elipsis;
    }

    return $cut;
}

Si lo probaras con tu código y una longitud de 34 caracteres:

$texto = "Este es un acortador de palabras, y yo deseo ser un acortador de cadenas no de palabras";

echo '<span>' . string_cut($texto,34) . '</span>';

Obtendrías como resultado correctamente:

<span>Este es un acortador de palabras...</span>

Espero que te sirva. Saludos.

Edición:

Si pretendes mostrar lo anterior pero poder acceder al contenido completo, puedes enviarlo de distintas maneras para poder obtenerlo, una de ellas es utilizar los atributos data-* a los que puedes acceder vía jQuery:

echo '<span id="miSpan" data-contenido="' . $texto . '">' . string_cut($texto,34) . '</span>';

Puedes acceder al contenido del data-contenido de ese span utilizando:

var contenido = $('span#miSpan').data('contenido');

Edición 2:

Si lo que pretendes es mostrar recortado, pero que el texto esté completo, puedes hacer lo mismo que hice, pero al revés:

echo '<span id="miSpan" data-recorte="' . string_cut($texto,34) . '">' . $texto . '</span>';

y luego con jQuery "recortar" la cadena, mostrando el recorte en lugar del contenido:

$(document).ready(function(){
// por si lo quieres usar para algo más...
var contenido = $('span#miSpan').text();
$('span#miSpan').text($('span#miSpan').data('recorte'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="miSpan" data-recorte="Este es un acortador de palabras...">Este es un acortador de palabras, y yo deseo ser un acortador de cadenas no de palabras</span>

Si es una cuestión de SEO, el contenido del marcado es la cadena completa, aunque posteriormente se manipule y se coloque la cadena recortada.

Edición 3:

Puede hacerse aún más simple y enviar únicamente la longitud de la cadena como data-recorte y que jQuery se encargue de recortar, del lado de PHP:

$recorte = string_cut($texto,34,'');
echo '<span id="miSpan" data-recorte="' . strlen($recorte) . '">' . $texto . '</span>';

El tercer parámetro de string_cut es una cadena vacía para evitar que agregue los puntos suspensivos.

$(document).ready(function(){
// por si lo quieres usar para algo más...
var contenido = $('span#miSpan').text();
$('span#miSpan').text(contenido.substr(0, $('span#miSpan').data('recorte')) + '...');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="miSpan" data-recorte="32">Este es un acortador de palabras, y yo deseo ser un acortador de cadenas no de palabras</span>

Saludos!

3
  • pero al inspeccionar el código con la herramienta de desarrollador del navegar yo sigo viendo el recortado y no el texto completo.
    – Otto
    Commented el 11 oct. 2017 a las 20:32
  • @J.Doe eso pasa porque inspeccionas el DOM luego de la ejecución del script, si deshabilitas javascript podrás observar el texto completo, cuando se obtiene el HTML de la página y se parsea el DOM, el texto está completo. Commented el 12 oct. 2017 a las 17:07
  • fue una gran respuesta pero no es lo que realmente deseaba gracias por la dedicación, por eso de he dado un +1 lo que quería esta en la respuesta aceptada saludos :)
    – Otto
    Commented el 13 oct. 2017 a las 2:36
1

Te voy a poner dos métodos equivalentes, uno para PHP y el otro para JavaScript. La idea sería usar strrpos en PHP o lastIndexOf en JavaScript y el resultado final será el mismo en ambos casos, aunque quizás sería mejor hacerlo en PHP para evitar las consecuencias de hacerlo en JavaScript (un flashazo de texto antes de cortarse).

PHP: strrpos

La función strrpos devuelve la posición de la última ocurrencia del carácter especificado. A diferencia de strpos (que devuelve la primera ocurrencia) una ventaja de strrpos es que permite buscar desde el final de la cadena y no sólo desde el principio. Esto se hace poniendo un número negativo como offset.

Aquí te dejo una pequeña función de cómo sería:

function getSubString($string, $length=NULL){
  //Si no se especifica la longitud por defecto es 50
  if ($length == NULL)
    $length = 50;

  // quitamos las etiquetas HTML
  $stringDisplay = strip_tags($string);

  // solo se recorta si la longitud es mayor que el limite
  if (strlen($stringDisplay) > $length) {
    // obtenemos la posicion a partir de la cual se cortara
    $indiceCorte = strrpos($stringDisplay, " ", $length - strlen($stringDisplay));

    // montamos una nueva cadena con el corte primero y la elipsis
    $stringDisplay = substr($stringDisplay, 0, $indiceCorte) . "...";
  }

  return $stringDisplay;
}

//Veamos la ejecución de la misma.
$texto = "Este es un acortador de palabras, y yo deseo ser un acortador de cadenas no de palabras";
echo '<span>'.getSubString($texto).'</span><br/>';
echo '<span>'.getSubString($texto, 15).'</span><br/>';
echo '<span>'.getSubString($texto, 30).'</span><br/>';

El script anterior dará como resultado:

Este es un acortador de palabras, y yo deseo ser...

Este es un...

Este es un acortador de...

Ahora podrías hacer un ejemplo más elaborado que en lugar de mandar la cadena recortada mande toda la cadena y se esconda una parte con CSS (aunque siga ahí por lo que los buscadores la indexarán).

Los estilos serían algo como esto (los puedes ver funcionando con más detalle en el ejemplo de JavaScript):

.antes-ellipsis::after { content: "..."; }
.despues-ellipsis { font-size:0; }

Y el PHP se vería así:

<?php

function getSubString($string, $length=NULL){
  //Si no se especifica la longitud por defecto es 50
  if ($length == NULL)
    $length = 50;

  // quitamos las etiquetas HTML
  $stringDisplay = strip_tags($string);

  // solo se recorta si la longitud es mayor que el limite
  if (strlen($stringDisplay) > $length) {
    // obtenemos la posicion a partir de la cual se cortara
    $indiceCorte = strrpos($stringDisplay, " ", $length - strlen($stringDisplay));
    echo "<p>$indiceCorte</p>";

    // montamos una nueva cadena con el corte
    $stringDisplay = "<span class='antes-ellipsis'>" . substr($stringDisplay, 0, $indiceCorte) . "</span>" .
                     "<span class='despues-ellipsis'>" . substr($stringDisplay, $indiceCorte) . "</span>";
  }

  return $stringDisplay;
}


//Veamos la ejecución de la misma.
$texto = "Este es un acortador de palabras, y yo deseo ser un acortador de cadenas no de palabras";
echo '<span>'.getSubString($texto).'</span><br/>';
echo '<span>'.getSubString($texto, 15).'</span><br/>';
echo '<span>'.getSubString($texto, 30).'</span><br/>';

JavaScript: lastIndexOf

Podrías usar JavaScript y la función lastIndexOf para encontrar la última posición que es un espacio en blanco antes de una posición dada. Con eso ya sabrás por dónde tienes que romper la cadena si hace falta.

Una vez rota la cadena entre lo que se debe mostrar y no mostrar, puedes crear dos elementos:

  • El primer elemento sería la parte visible, que combinado con el pseudo-elemento ::after mostrará una elipsis (...)
  • El segundo elemento sería la parte invisible, si le pones un font-size: 0 quedará invisible.

Algo como esto (en JavaScript puro):

const MAXSIZE = 10;

// seleccionamos los elementos que queremos procesar
var h2 = document.querySelectorAll("h2");

// para cada uno de ellos
for (var x = 0; x < h2.length; x++) {
  
  // inicializamos variables para no tener que acceder/calcularlas cada vez
  var elem = h2[x];
  var texto = elem.textContent;
  
  // si el texto es mayor que el límite permitido
  if (texto.length > MAXSIZE) {
  
    // buscamos la posición del último espacio en blanco antes del límite
    var idx = elem.textContent.lastIndexOf(" ", MAXSIZE);
  
    // creamos dos elemntos span para cada una de las partes
    texto = "<span class='antes-ellipsis'>" + 
            elem.textContent.substr(0, idx) +
            "</span>" +
            "<span class='despues-ellipsis'>" +
            elem.textContent.substr(idx) + 
            "</span>";
  }
  
  // reemplazamos el texto original por el nuevo
  elem.innerHTML = texto;
  
}
/* el contenido visible terminará con una elipsis */
.antes-ellipsis::after {
  content:"...";
}

/* el contenido invisible se ocultará cambiando su tamaño a cero */
.despues-ellipsis {
  font-size: 0;
}
<h2>php 7 basic</h2>
<h2>Otro texto de otro contenedor</h2>
<h2>Otro texto de otro contenedor dos</h2>

Como los pseudo-elementos no son seleccionables pero los elementos con tamaño 0 sí lo son (aunque no estén visibles), entonces al seleccionar y copiar el texto de arriba te estarán copiando las cadenas originales.

O si lo quieres con jQuery, podrías hacerlo así:

const MAXSIZE = 10;

$("h2").each(function() {
  
  $this = $(this);
  
  if ($this.text().length > MAXSIZE) {
  
    var idx = $this.text().lastIndexOf(" ", MAXSIZE);
  
    texto = "<span class='antes-ellipsis'>" + 
            $this.text().substr(0, idx) +
            "</span>" +
            "<span class='despues-ellipsis'>" +
            $this.text().substr(idx) + 
            "</span>";
  }
  
  $this.html(texto);
  
})
.antes-ellipsis::after {
  content:"...";
}

.despues-ellipsis {
  font-size: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2>php 7 basic</h2>
<h2>Otro texto de otro contenedor</h2>
<h2>Otro texto de otro contenedor dos</h2>


0

Estas definiendo $descripcion después del for y debería de ser antes:

<?php 

    $descripcion = "HOLA MUNDO COMO ESTAS TE QUIERO AMOR DE MI VIDA";
    for ($i=strlen($descripcion); $i>0; $i--) {

       if (substr($descripcion,$i, $i-1) == '') 
         break; 
    }
    echo "<span>".substr($descripcion,0,$i)."...</span>"; 
    ?>

Cuando hagas la consulta a base de dato procura tenerla definida antes del for.

4
  • Te lanza el siguiente error?: type 8 -- Uninitialized string offset: 150 -- at line 5?
    – Einer
    Commented el 20 ago. 2017 a las 17:42
  • si exactamente ese mismo error y no solamente uno si no varias lineas con el mismo error.
    – Otto
    Commented el 20 ago. 2017 a las 17:43
  • Mira la respuesta actualizada y dime si es eso lo que quieres.
    – Einer
    Commented el 20 ago. 2017 a las 18:00
  • Me había olvidado de esta pregunta, ya la he actualizado explicando detalladamente cual es la idea :)
    – Otto
    Commented el 9 oct. 2017 a las 16:37
0

Te voy a dejar un ejemplo que probé hace poco tiempo, que acorta la cadena sin que corta la palabra, que es según entendí lo que deseas en tu ejemplo.

Un posible ejemplo:

//Función para acortar cadena.
function getSubString($string, $length=NULL) {

    if ($length===NULL) {
        //Inilizamos longitud.
        $length = 15;           
        //Comprobamos que la cadena contiene mas caracteres que el valor que contiene $lenght
        if (strlen($string) > $length) {
            for ($length; $length>0; $length--)
              if ($string[$length]==' ') break;
                $stringDisplay = substr($string,0,$length) . "...";
        } else { //La cadena no supera a $lenght, mostramos la cadena original.
            $stringDisplay = $string;
        }
        //Retornamos la cadena.
        return $stringDisplay;          
    }

}

//Cadena a acortar.
$producto = 'Zapatillas deportivas.';
//Llamamos nuestra función.
echo getSubString($producto);

Resultado:

Zapatillas...

Nota: si cuentas los caracteres de zapatillas sería un total de 10, como se puede ver no ha acortado la siguiente palabra que por lógica seria depor como la palabra deportivas excede ya el máximo permitido de 15 ($lenght), no mostrara los 5 últimos caracteres restantes, conclusión no te mostrara palabras acortadas.

0

Dejo esta función, que acorta respetando las palabras con un simple regex:

function short_words($numwords,$texto)
{
  preg_match("/(\S+\s*){0,$numwords}/", $texto, $regs);
  $resultado = trim($regs[0]);
  return $resultado;
}

Vamos a hacer algunas pruebas:

Recortemos 5:

$texto = "Uno Dos Tres Cuatro Cinco Seis";
$resultado=short_words(5,$texto);
echo "<span>$resultado...</span>";

Resultado:

<span>Uno Dos Tres Cuatro Cinco...</span>

Recortemos 15:

$texto = "Uno Dos Tres Cuatro Cinco Seis Siete 8 Nueve 10 11 Doce Trece Catorce Quince Dieciseis";
$resultado=short_words(15,$texto);
echo "<span>$resultado...</span>";

Resultado:

<span>Uno Dos Tres Cuatro Cinco Seis Siete 8 Nueve 10 11 Doce Trece Catorce Quince...</span>

Fuente: PHP: Truncating Text

Hay otras funciones de truncado que pueden ser de tu interés.

4
  • muy bueno el ejemplo, una duda a la hora de ver código fuente mostrara esto <span>Uno Dos Tres Cuatro Cinco Seis Siete 8 Nueve 10 11 Doce Trece Catorce Quince...</span> o mostrara esto <span>Uno Dos Tres Cuatro Cinco Seis Siete 8 Nueve 10 11 Doce Trece Catorce Quince Dieciseis</span>
    – Otto
    Commented el 10 oct. 2017 a las 18:27
  • por ejemplo la respuesta de aldanux puedes ejecutar el primer ejemplo muestra en pantalla esto Desarrollo Web Completo co... pero ahora si inspeccionas el elemento del resultado con la herramienta de desarrollador del navegador muestra esto: <p class="recortar">Desarrollo Web Completo con HTML5, CSS3, JS AJAX PHP y MySQL</p> y es exactamente lo que quiero. ¿pero sera posible esto con php? Talvez en otras funciones se podría lograr.
    – Otto
    Commented el 10 oct. 2017 a las 18:34
  • @JDoe me parece que mostrará lo primero, aunque no lo he probado. Ignoro si se pueda hacer con sólo PHP. A simple vista me parece que a todo nivel, simplicidad, rendimiento, etc, lo mejor sería hacerlo mediante CSS.
    – A. Cedano
    Commented el 10 oct. 2017 a las 18:45
  • Pero lo malo es que no se puede controlar por decir en cuantos caracteres querer mostrar y solo funciona al darle un determinado width mira este ejemplo yo quiero mostrar lo que se encuentra comentado en el área HTML sin tener que cambiar el width así como lo muestra udemy por ejemplo.
    – Otto
    Commented el 10 oct. 2017 a las 20:34
-1

Si visitamos la página principal de Udemy observamos algún titulo de sus cursos se pueden observar que tiene añadidos (...) puntos suspensivos a un titulo demasiado largo, pero si inspeccionamos el titulo con la herramienta de desarrollador del navegador te darás cuenta que el titulo se encuentra completo a pesar de que no se muestra en ejecución.

Si lo que busca es estrictamente la presentación del texto del lado del cliente, esto lo logra creando una clase css y aplicándolo a los textos que desea que se corten si son demasiados extensos

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

Si esto es demasiado "rigido" puede utilizar la aternativa de la librería Clamp.js en donde puede manipular el HTML de la siguiente manera

/* clamp-this-module es un nombre de clase*/
var module = document.getElementById("clamp-this-module");

$clamp(module, {clamp: 3});
2
  • Gracias @Ale te dire lo mismo que le dije a Aldanux El ejemplo es perfecto pero lo malo es que no se puede controlar por decir en cuantos caracteres querer mostrar esto (...) y solo funciona esto (...) al darle un determinado width mira este ejemplo yo quiero mostrar lo que se encuentra comentado en el área HTML sin tener que cambiar el width de mi contenido así como lo muestra udemy por ejemplo.
    – Otto
    Commented el 10 oct. 2017 a las 22:35
  • @J.Doe posiblemente entonces la librería js pueda ser la solución, ya que ahí puede declarar cuantos caracteres desea mostrar
    – Alejandro
    Commented el 10 oct. 2017 a las 22:54
-1

Hoy justo tuve que resolver este mismo problema y lo hice con este plugin de jQuery:

http://dotdotdot.frebsite.nl

3
  • 1
    para que utilizar un plugin amigo cuando existe formas más sencillas de lograrlo :)
    – Otto
    Commented el 14 oct. 2017 a las 1:55
  • Dada la multitud de dispares respuestas presentadas aquí, no se que tan sencilla de resolver es esta cuestión. Prefiero optar por una solución con cierto respaldo, como lo es ese plugin.
    – CJ Nimes
    Commented el 14 oct. 2017 a las 2:46
  • Ese es el problema que siempre se desvían de la pregunta cuando existe un código que funciona pero que presentó un par de problema, simple código cómo el de la respuesta aceptada :)
    – Otto
    Commented el 14 oct. 2017 a las 4:14

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.