When the width of canvas is not wide enough, the canvas will not wrap automatically. You can use the following code to deal with it
<body> <canvas id="canvas" width="200" height="200" style="background:pink;"></canvas> <script> function draw() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var str = "When there is a lot of content, canvas It doesn't wrap lines automatically. It needs special handling when there is too much content, canvas It doesn't wrap lines automatically. It needs special handling when there is too much content, canvas It doesn't wrap lines automatically. It needs special handling when there is too much content, canvas No line wrapping, special handling required"; var canvasWidth = ctx.canvas.width; ctx.font = "20px Microsoft"; console.log(ctx.measureText(str)) canvas.height = Math.ceil(ctx.measureText(str).width / canvasWidth) * 25; ctx.font = "16px Microsoft"; //After you redefine the height of the canvas, you need to redefine the font size, otherwise it becomes the default value var initHeight = 25; //The initial height of the drawing font from the top of the canvas var lastSunStrIndex = 0; //Index of the string to be intercepted each time var contentWidth = 0; if (ctx.measureText(str).width <= canvasWidth) { ctx.fillText(str, 0, initHeight); return } for (let i = 0; i < str.length; i++) { contentWidth += ctx.measureText(str[i]).width; if (contentWidth > canvasWidth - 32) { ctx.fillText(str.substring(lastSunStrIndex, i), 12, initHeight) //Draw the uncut part initHeight += 25; contentWidth = 0; lastSunStrIndex = i; } if (i == str.length - 1) { ctx.fillText(str.substring(lastSunStrIndex, i + 1), 12, initHeight); } } } draw() </script> </body>
On the method and style setting of canvas drawing text
canvas provides two ways to render text:
fillText(text, x, y [, maxWidth])
Fill the specified text in the specified (x,y) position, and the maximum width drawn is optional
strokeText(text, x, y [, maxWidth])
Draw the text border at the specified (x,y) position, and the maximum width is optional
Set style
The current style we use to draw text. This string uses the CSS font The default font is 10px sans serif.
textAlign = value
Text alignment options. The optional values are start, end, left, right or center. The default value is start.
Baseline alignment options. Optional values include: top, hanging, middle, alphabetic, ideographic, and bottom. The default value is alpha.
Text direction. The possible values are: ltr,; rtl,; inherit. The default value is inherit.