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>