# How can I break textToPoints into lines according to canvas width

**URL:** <https://discourse.processing.org/t/how-can-i-break-texttopoints-into-lines-according-to-canvas-width/38341>\
**Category:** Coding Questions\
**Created:** [August 13, 2022, 10:42am UTC](https://discourse.processing.org/t/how-can-i-break-texttopoints-into-lines-according-to-canvas-width/38341 "2022-08-13T10:42:16Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![pedrocoelho](https://avatars.discourse-cdn.com/v4/letter/p/3be4f8/32.png) [@pedrocoelho](https://discourse.processing.org/u/pedrocoelho)\
**Post date:** [August 13, 2022, 10:42am UTC](https://discourse.processing.org/t/how-can-i-break-texttopoints-into-lines-according-to-canvas-width/38341/1 "2022-08-13T10:42:16Z")

</div>

I’m trying to adapt the [Steering Behavior](https://www.youtube.com/watch?v=4hA7G3gup-4) tutorial from the Coding Train and make it more responsive.  
I’m wondering how can I divide the text into lines according to some width value, like canvas width.

I thought about using textBounds to check the width of the entire sentence and then remove the last word of the sentence until it is long enough to fit the container, however I can’t wrap my head on how to this recursively so we get the most amount of words in each line 🙂

```auto
 bounds = font.textBounds(title, 0, 0, fontSize) as Bounds;
    while (bounds.w > canvasSize.width) {
      linesToRender.unshift(getLastWord(title));
      title = removeLastWord(title);
      bounds = font.textBounds(title, 0, 0, fontSize) as Bounds;
      linesToRender = [linesToRender.join(" ")];
      linesToRender = [title, ...linesToRender];
    }

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 14, 2022, 5:57pm UTC](https://discourse.processing.org/t/how-can-i-break-texttopoints-into-lines-according-to-canvas-width/38341/2 "2022-08-14T17:57:53Z")

</div>

> [@pedrocoelho](#):
>
> … and then remove the last word of the sentence until it is long enough to fit the container,

- Perhaps it’d be easier to start w/ just 1 word, then keeping adding more until the line exceeds maximum width.
- Then create another line having the word which had exceeded the width from previous line.
- Keep doing that until all words from the text are added to the lines.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [August 15, 2022, 12:18pm UTC](https://discourse.processing.org/t/how-can-i-break-texttopoints-into-lines-according-to-canvas-width/38341/3 "2022-08-15T12:18:20Z")

</div>

> [@Finding the x,y location of a word when text wrapped](https://discourse.processing.org/t/finding-the-x-y-location-of-a-word-when-text-wrapped/38243/5):
>
> thank you! smiling_face_with_three_hearts new version, minor changes // Text box (to replace text() with 5 parameters) with wrapping, so that each word can be separately detected when mouse is over. // Click mouse on a word to get the word via println or hover mouse on a word for the small status bar. // Sketch can be strongly improved // https://discourse.processing.org/t/finding-the-x-y-location-of-a-word-when-text-wrapped/38243 final String txt\_copy = "Nullam feugiat mauris vitae s…