Limitar el número de palabras en un div

5 minutos de lectura

¿Existe una propiedad css que pueda limitar la cantidad de caracteres que se mostrarán en un div? Por ejemplo

<div class ="main-text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

pero necesito mostrar solo

<div class ="main-text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>

Estoy usando un sitio de wordpress con función de testimonio. Entonces, si algún cliente agrega un testimonio, necesito mostrar solo las primeras palabras con el enlace. ¡¡Por favor ayuda!! ¡¡Gracias!!

avatar de usuario
Bud Damiánov

Puedes jugar con un overflow propiedad (en realidad hay un par de ellos – overflow-x, overflow-y y overflow), también tienes que configurar el width en unidades absolutas (léase píxeles o em, pero no en porcentaje) de su div.

Por ejemplo (CSS):

div.main-text {overflow-x: hidden;width: 200px;} 
/*This will hide everything, which goes outside of the 200px div*/

También puede limitar su texto con código PHP simple:

if (!function_exists('chop_string')) {
function chop_string($str, $len) {
    if (strlen($str) < $len)
        return $str;

    $str = substr($str,0,$len);
    if ($spc_pos = strrpos($str," "))
            $str = substr($str,0,$spc_pos);

    return $str . "Read more...";
}   
}

Coloque la función anterior en su tema de WordPress functions.php archivo y usarlo así:

<?php echo chop_string('Bla bla bla', 5); ?>

El código anterior mostrará solo 5 caracteres de su cadena y Read more....

EDITAR:

Si desea cortar el título o el contenido generado que proviene de WordPress, debe editar su page.php archivo (también archive.php archivo), están dentro de su directorio de plantillas. Encuentre el siguiente código en esos archivos: the_content() y the_title(), esas 2 funciones muestran en realidad toda la información de la base de datos

Así que córtalos así:
<?php echo chop_string(the_title(), 5); ?> o
<?php echo chop_string(the_content(), 5); ?>

  • ¿Dónde debería agregar esto .También siento preguntar ¿es bla bla bla el texto para limitar en tu ejemplo?

    usuario3488898

    8 de mayo de 2014 a las 7:55

  • Sí, el texto en el código es solo un ejemplo. Colocar el <?php echo chop_string('your real text here', 5); ?> en la plantilla de página, donde desea cortar el texto.

    – Bud Damyanov

    8 de mayo de 2014 a las 7:57


  • pero estoy en un sitio de wordpress. el texto se genera automáticamente

    usuario3488898

    8 de mayo de 2014 a las 7:58

  • el texto que realmente tengo que cortar viene en $content. Entonces, si agrego el código como este trabajo? o $contenido = chop_string($contenido, 5); y luego echo $content. ¡Ayuda por favor!

    usuario3488898

    8 de mayo de 2014 a las 8:12

Hay dos formas de lograr esto:

1) forma CSS

agregar la propiedad css desbordamiento de texto: puntos suspensivos

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

2) Forma de truco (HTML)

Agrega un área de texto controlar dentro de la div and add **maxlength=50** o lo que necesites, oculta el borde usando el CSS border:none propiedad.

avatar de usuario
pethel

Puedes usar puntos suspensivos css. Solo úsalo en el desbordamiento de texto. Se truncará y se adaptará al ancho de su cuadro.

http://davidwalsh.name/css-elipsis

http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

.main-text {
  width: 250px;

}

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

Una limitación es que está restringido a usar una fila.

  • Una sugerencia en lugar de publicar un enlace, pegue el código relevante aquí.

    – Kheema Pandey

    8 de mayo de 2014 a las 7:32

  • Este parece demasiado cerca. ¿Alguna sugerencia para que sea más de una fila?

    usuario3488898

    8 de mayo de 2014 a las 7:43

  • @user3488898 muchas personas usan este complemento jQuery puntodotdot.frebsite.nl (punto punto punto). En CSS puro no es posible.

    – pethel

    8 de mayo de 2014 a las 7:45


No, CSS es de presentación, por lo que no está involucrado con la longitud del contenido específico. Puede recortar propiedades de presentación como el tamaño de la caja con el overflow y text-overflow propiedades, pero no en base al contenido. Sin embargo, puede solucionarlo fácilmente en el lado del servidor:

$text = strlen($text) > 250 ? substr($text, 0, 250).'&hellip;' : $text;
echo "<p>$text</p>";

Esto inserta puntos suspensivos después de 250 caracteres si el texto es más largo que eso.

Con la ayuda de la propiedad CSS3 “text-overflow”: puede establecer el ancho del cuadro, lo que da como resultado el ancho exacto para TODOS los divs;

El texto no se cortará en medio de la palabra y agregará “…” al final del texto, lo que indica que es un texto de vista previa;

Código HTML:

<div id="myDiv">Just some text - you won't see ME!</div>

Código CSS:

#myDiv {
    background: red;
    color: white;
    font-size: 20px;
    height: 50px;
    overflow: hidden;
    width: 256px;
    white-space:nowrap;
    text-overflow: ellipsis;
}

Probado bajo FF, Chrome, IE11

  • Esto ha sido sugerido en varias respuestas. El cartel original no quiere limitarse a sí mismo a una fila como lo hace “desbordamiento de texto: puntos suspensivos”.

    – pethel

    8 de mayo de 2014 a las 8:39

Esta es la demostración de mi solución: limit-printed-words.html

funciona bien con cualquier nivel anidado e incluso contenido de botón.


ingrese la descripción de la imagen aquí


Proyecto fuente: scriptbucket

  • Esto ha sido sugerido en varias respuestas. El cartel original no quiere limitarse a sí mismo a una fila como lo hace “desbordamiento de texto: puntos suspensivos”.

    – pethel

    8 de mayo de 2014 a las 8:39

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad