Begrenzen Sie die Anzahl der Wörter in einem div

Gibt es eine CSS-Eigenschaft, die die Anzahl der in einem div.Zum Beispiel anzuzeigenden Zeichen begrenzen kann

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

aber ich muss nur anzeigen

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

Ich verwende eine WordPress-Site mit Testimonial-Funktion. Wenn also ein Kunde einen Testimonial hinzufügt, muss ich nur die ersten paar Wörter mit dem Link anzeigen. Bitte helfen Sie!! Vielen Dank!!

Sie können mit a herumspielen overflow Eigentum (eigentlich gibt es ein paar davon – overflow-x, overflow-y und overflow), auch müssen Sie die einstellen width in absoluten Einheiten (lesen Sie Pixel oder em, aber nicht in Prozent) Ihrer div.

Zum Beispiel (CSS):

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

Sie können Ihren Text auch mit einfachem PHP-Code einschränken:

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...";
}   
}

Platzieren Sie die obige Funktion in Ihrem WordPress-Theme functions.php Datei und verwenden Sie es wie folgt:

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

Der obige Code zeigt nur 5 Zeichen aus Ihrer Zeichenfolge und Read more....

BEARBEITEN:

Wenn Sie den Titel oder den generierten Inhalt, der aus WordPress stammt, kürzen möchten, müssen Sie Ihren bearbeiten page.php Datei (auch archive.php Datei), sie befinden sich in Ihrem Vorlagenverzeichnis. Suchen Sie den folgenden Code in diesen Dateien: the_content() und the_title(), Diese 2 Funktionen zeigen eigentlich alle Informationen an aus Datenbank.

Also schneide sie so:
<?php echo chop_string(the_title(), 5); ?> oder
<?php echo chop_string(the_content(), 5); ?>

Es gibt zwei Möglichkeiten, wie Sie dies erreichen können:

1) CSS-Weg

fügen Sie die CSS-Eigenschaft hinzu Textüberlauf: Ellipse

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

2) Trickweg (HTML)

füge hinzu ein Textbereich Kontrolle innerhalb der div and add **maxlength=50** oder was auch immer Sie brauchen, blenden Sie den Rand mit aus css border:none Eigentum.

Sie können CSS-Ellipsen verwenden. Verwenden Sie es einfach auf dem Textüberlauf. Es wird abgeschnitten, um sich an die Breite Ihrer Box anzupassen.

http://davidwalsh.name/css-ellipsis

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

Eine Einschränkung besteht darin, dass Sie auf die Verwendung einer Zeile beschränkt sind.

Nein, CSS dient der Präsentation, ist also nicht an der Länge bestimmter Inhalte beteiligt. Es kann mit dem Clip auf Präsentationseigenschaften wie die Boxgröße eingestellt werden overflow und text-overflow Eigenschaften, aber nicht inhaltsbasiert. Sie können es jedoch leicht auf der Serverseite beheben:

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

Dadurch wird nach 250 Zeichen ein Auslassungszeichen eingefügt, wenn der Text länger ist.

Mit Hilfe des CSS3-Properties “text-overflow” kann man die Boxbreite einstellen, somit ergibt sich für ALLE divs die exakte Breite;

Text wird nicht in der Mitte des Wortes abgeschnitten und es wird “…” am Ende des Textes hinzugefügt, was darauf hinweist, dass es sich um einen Vorschautext handelt;

HTML Quelltext:

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

CSS-Code:

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

Getestet unter FF, Chrome, IE11

Dies ist meine Lösungsdemo: limit-gedruckte-worte.html

Es funktioniert gut mit jede verschachtelte Ebene und sogar Schaltflächeninhalte.

Quellprojekt: scriptbucket