Limitar el número de palabras en un div

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

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

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.

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.

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).'…' : $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

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.

Proyecto fuente: scriptbucket