Home / Questions / 96217
Accepted
Otto
Asked: 2020-08-21 09:23:19 +0800 CST 2020-08-21 09:23:19 +0800 CST

How to shorten string, without cutting words?

  • 772

I am using one functionto shorten words, but what I really want is to create in the functionshorten string, without shortening words

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

The result that is printed is the following:

This is a hair shortener...

When inspecting the source code with the browser's developer tool it shows the following:

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

Update

After having had so many very interesting answers but all unfortunately failed.

I came up with the idea using jQuery to delimit the word and then join it, for example we are going to limit the characters to be displayed from 10any text, taking as an example the following text *"php 7 basic" the result will be the following:

php 7...

Inspecting the output with the browser's developer tool will display the following: (not what I thought) but more ideal

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

Why ideal? Because this way it will not show an incomplete text in the future in the search engines, now if we remove the display:none;it will show this:

php 7...basic

And it's perfect but there are two problems:

  • It is adding idto the tag h2and since there are several elements to trim, this will not be valid for the correct validation of HTML, the HTML validation documentation says that there should not be more than one content with the idsame name, the solution is to migrate the a jQuery code idinclass an article to classuse .each()its jQuery functions.

  • The second error is that it only works with a single element that contains the id="original"if I add more than one in the same document it only shortens the first one the rest of the elements don't.

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

In the javascript(jQuery) section I changed this ('#original')to this $('.original')but it didn't work, when making those changes the first content is repeated and the rest is ignored, it can be seen in the following link https://jsfiddle.net/mrfndefx/

php

10 Answers

  1. A solution would be to use wordwrap :

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

echo $subDescripcion;

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

    Perhaps an adjustment such as compare if it is < (70-3) should be made (the three is for the three continuous points), but the wordwrap function cuts the sentence with spaces respecting the words... So you don't need the loop, which it can give you problems.

    Documentation: http://php.net/manual/es/function.wordwrap.php

    • 3

  2. The idea you have is not going to be achieved just with PHPsince you are manipulating it on the server side and you would have to work with several variables, one that shows you the trimmed and the other with the complete string and then you would have to manipulate it on the client side ... bone many steps to be able to do it with CSSsimply using:

    Example:

    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: (according to comments)

    If you want to use the effect of Udemyyou have to use the property -webkit-line-clamp( caniuse.com)

    Proprietary and undocumented that will contain text to a specified number of lines when used in combination with display: -webkit-box. With text-overflow: ellipsiswill end the text with ellipses.

    If you're in a browser that supports that property you won't have a problem, try watching Udemy in FF and you'll see that the effect disappears... but we wouldn't be OSes if there wasn't a solution for it.

    Better said a Fallback, for that we check if it supports -webkit-line-clampwith @supports(... and YES ... @supportsit is not supported in the (old) IE browsers), in case it does not support -webkit-line-clamp, we put a gradient effect on the text which simulates the disappearance of the same... otherwise it shows the ellipsis(...)

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

    Another example would be to use a bit of JS( original code ), here we trim it indicating the desired length without trimming in the middle of the word and then add an ellipsis-like link to display the rest of the text:

    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>

    • 3

  3. 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!

    • 2
  4. Best Answer

    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.

    • 2

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

    • 1

  6. You are defining $descripcionafter forand should be before:

    <?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>"; 
    ?>

    When you make the database query, try to have it defined before the for.

    • 0

  7. I'm going to leave you with an example that I tried a short time ago, which shortens the string without cutting the word, which is what I understood you want in your example.

    A possible example:

    //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);

    Result:

    Zapatillas...

    Note: if you count the characters of sneakers, it would be a total of 10, as you can see, the next word has not been shortened, which logically would deporbe as the word sports already exceeds the maximum allowed of 15( $lenght), it will not show the 5last remaining characters, conclusion does not will show shortened words.

    • 0

  8. I leave this function, which shortens respecting the words with a simple regex:

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

    Let's do some tests:

    Let's cut 5:

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

    Result:

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

    Let's cut 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>";

    Result:

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

    Source: PHP: TruncatingText

    There are other truncation functions that may be of interest to you.

    • 0

  9. If we visit the main page of Udemy we observe some title of their courses you can see that it has added (...) ellipses to a title that is too long, but if we inspect the title with the browser developer tool you will notice that the title it is complete even though it is not shown in execution.

    If strictly client-side text rendering is what you're after, you achieve this by creating a css class and applying it to the texts you want to be cut off if they're too long.

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

    If this is too "rigid" you can use the alternative of the Clamp.js library where you can manipulate the HTML as follows

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

$clamp(module, {clamp: 3});
    • -1

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

    http://dotdotdot.frebsite.nl

    • -1