Es ist erforderlich, eine Einladungskartenseite zu erstellen, bei der die Anzahl der Wörter im Titel dynamisch ist und bis zu 2 Zeilen angezeigt werden kann. Wenn sie 2 Zeilen überschreitet, werden am Ende der zweiten Inhaltszeile Auslassungspunkte hinzugefügt. Je nach Persönlichkeit des Produktmädchens besteht eine hohe Wahrscheinlichkeit, dass die Einstellung der vier Zeilen in Zukunft geändert wird, daher darf sie hier nicht fest codiert werden. Daher habe ich vor ein paar Tagen tatsächlich darum gebeten Ändern Sie es so, dass bis zu 4 Zeilen angezeigt werden, die anderen bleiben gleich. Das Produktmädchen ist zu jung :)!
Hier ist ohne weiteres der Code zum Angeben! Schauen Sie sich vor dem Laden des Codes die zu übergebenden Parameter an! !
Parameterbeschreibungen mit Bildern und Texten, verzeihen Sie mir meine Ungeduld PS Technik und Design
// Automatische Zeilenumbruchfunktion für Text textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) { var drawTxt = ''; // Der aktuell gezeichnete Inhalt var drawLine = 1; // Welche Zeile soll mit dem Zeichnen beginnen? = 0; // Index des aktuellen Zeichnungsinhalts // Bestimmen Sie, ob der Inhalt in einer Zeile gezeichnet werden kann if(ctx.measureText(content).width <= lineMaxWidth) { ctx.fillText(content.substring(drawIndex, i), drawX, drawY); else { for (var i = 0; i <= content.length; i++) { drawTxt += content[i]; (ctx.measureText(drawTxt).width > lineMaxWidth) { if (drawLine === lineNum) { // Fügen Sie der letzten Zeile ein Auslassungszeichen hinzu ctx.fillText(content.substring(drawIndex, i) + '...', drawX, drawY } else { // Wenn es nicht die letzte Zeile ist, ctx.fillText( content.substring(drawIndex, i + 1), drawX, drawY); += 1; // Anzahl der Zeilen + 1 drawY += lineHeight; // Die y-Koordinate des gezeichneten Inhalts erhöht die Zeilenhöhe entsprechend drawTxt = ''; unerwartete EntdeckungBeim Zeichnen von Text habe ich festgestellt, dass die Y-Koordinate des Texts auf dem oberen Rand des Textes basieren sollte. Ein Bild ist mehr Worte wert, das Bild oben!
Browserumgebung: Chrome 71.0.3578.98 (offizielle Version) (64-Bit)
Die Schriftgröße beträgt 40 Pixel
Wenn die gezeichnete Y-Koordinate 0 ist, können Sie sehen, dass der Text nur in der oberen linken Ecke etwas ausläuft.Wenn die Y-Koordinate bei 40 gezeichnet wird, können Sie sehen, dass der Text vollständig angezeigt werden kann
NachwortDies ist ein relativ unbeliebter Codeeffekt, aber ich hoffe, dass er Freunden in Not helfen kann. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.