Skip to main content
añadir solución equivalente en PHP
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

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.


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

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.


 
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>

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.

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>

Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

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>