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

如何缩短字符串而不削减单词？

  • 772

我正在使用一个function来缩短单词，但我真正想要的是在function缩短字符串中创建，而不缩短单词

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

打印的结果如下：

这是一款短发...

使用浏览器的开发人员工具检查源代码时，会显示以下内容：

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

更新

在得到了这么多非常有趣的答案但不幸的是都失败了。

我想出了使用jQuery分隔单词然后加入它的想法，例如我们将限制从任何文本中显示的字符，以以下文本*“php 7 basic”10为例，结果将是以下：

php 7...

用浏览器的开发者工具检查输出会显示如下：（不是我想的那样）但更理想

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

何为理想？ 因为这样以后它不会在搜索引擎中显示不完整的文本，现在如果我们删除display:none;它，它将显示：

php 7 ...基本

它是完美的，但有两个问题：

  • 它正在添加id到标签中h2，由于要修剪几个元素，这对于正确验证 HTML 无效，HTML 验证文档说不应有多个id同名内容，解决方案是迁移idclass文章中的 jQuery 代码以使用class其.each()jQuery 函数。

  • 第二个错误是它仅适用于包含 的单个元素，id="original"如果我在同一个文档中添加多个元素，它只会缩短第一个元素，而其余元素不会。

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

在 javascript(jQuery) 部分中，我将其更改('#original')为 this$('.original')但它不起作用，当进行这些更改时，第一个内容被重复，其余内容被忽略，可以在以下链接中看到https://jsfiddle.net/ mrfndefx/

php

10 Answers

  1. 一个解决方案是使用wordwrap：

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

echo $subDescripcion;

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

    也许应该进行诸如比较是否为 < (70-3) 之类的调整（三个是针对三个连续点），但是 wordwrap 函数会用空格来切割句子...所以你不需要循环，它会给你带来问题。

    文档： http: //php.net/manual/es/function.wordwrap.php

    • 3

  2. 你的想法是不会实现的，PHP因为你是在服务器端操作它，你必须使用几个变量，一个显示修剪的，另一个显示完整的字符串，然后你必须在客户端操作它......CSS只需使用以下步骤即可完成许多步骤：

    例子：

    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>

    编辑：（根据评论）

    如果要使用效果Udemy必须使用属性-webkit-line-clamp( caniuse.com)

    与 display: -webkit-box. Withtext-overflow: ellipsis将用省略号结束文本。

    如果您使用的浏览器支持该属性，则不会有问题，请尝试在 FF 中观看 Udemy，您会发现效果消失了……但如果没有解决方案，我们就不会成为操作系统为了它。

    最好说 a Fallback，因为我们检查它是否支持-webkit-line-clamp( @supports... and YES ...@supports它在 (旧) IE 浏览器中不受支持)，如果它不支持-webkit-line-clamp，我们在文本上放置渐变效果模拟相同的消失...否则显示省略号(...)

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

    另一个例子是使用一点JS（原始代码），这里我们修剪它以指示所需的长度，而不在单词中间修剪，然后添加一个类似省略号的链接以显示其余文本：

    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. 前段时间我实现了以下函数来将字符串修剪到一定长度，尊重整个单词，你可以包含一段 html，它还检查省略号前面没有其他标点符号。

    /*
    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;
}

    如果您要使用您的代码和 34 个字符的长度对其进行测试：

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

    你会得到正确的结果：

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

    希望这可以帮到你。问候。

    版：

    如果您打算显示以上内容但能够访问完整内容，您可以通过不同的方式发送它来获取它，其中一种是data-*使用您可以通过以下方式访问的属性jQuery：

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

    您可以使用以下方式访问其data-contenido内容span：

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

    编辑2：

    如果你想要显示裁剪，但文本是完整的，你可以做我做的同样的事情，但相反：

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

    然后用jQuery“修剪”字符串，显示修剪而不是内容：

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

    如果是 SEO 问题，则标记内容是完整的字符串，即使修剪后的字符串稍后会被操作和放置。

    编辑3：

    您可以使它更简单，只需将字符串的长度作为数据修剪发送，并让 jQuery 在 PHP 端进行修剪：

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

    string_cut 的第三个参数是一个空字符串，以防止它添加省略号。

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

    干杯!

    • 2
  4. Best Answer

    事实是，您的疑问对我来说似乎很好奇，我想我了解以下内容：

    • 您希望将字符串截断为给定的最大字符数。
    • 您希望可见的单词是完整的。
    • 看到源代码后，您希望看到全文。
    • 您不希望 javascript 在 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. 您正在定义$descripcion之后for并且应该在之前：

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

    当您进行数据库查询时，请尝试在for.

    • 0

  7. 我将给你留下一个我不久前尝试过的例子，它可以缩短字符串而不削减单词，这就是我理解你在你的例子中想要的。

    一个可能的例子：

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

    结果：

    Zapatillas...

    注意：如果算上sneakers的字符，一共是个10，可以看到，下一个词没有被缩短，逻辑上是sports这个词已经超过了（ ）depor的最大允许值，它不会显示最后剩余的字符，结论不会显示缩短的单词。15$lenght5

    • 0

  8. 我留下了这个函数，它用一个简单的正则表达式缩短了对单词的尊重：

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

    让我们做一些测试：

    让我们切5：

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

    结果：

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

    让我们切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>";

    结果：

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

    来源：PHP：截断文本

    还有其他您可能感兴趣的截断函数。

    • 0

  9. 如果我们访问 Udemy 的主页，我们会观察到他们课程的某些标题，您会看到它在过长的标题中添加了（...）省略号，但是如果我们使用浏览器开发人员工具检查标题，您会注意到即使它没有在执行中显示，它的标题也是完整的。

    如果您所追求的是严格的客户端文本渲染，您可以通过创建一个 css 类并将其应用于您想要截断的文本（如果它们太长）来实现这一点。

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

    如果这太“僵化”，您可以使用 Clamp.js库的替代方案，您可以在其中操作 HTML，如下所示

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