Feature Request: Add `wordWrap` Property to `Text`

[eonarheim]

Discussed in https://github.com/excaliburjs/Excalibur/discussions/3178

^{Originally posted by ambmcmdmem626 August 24, 2024}

Premise

When using the maxWidth property of Text, the text may wrap in the middle of a word.

const text = new Text({
  text: 'Apple Banana Chocolate',
  maxWidth: 100,
});

Main Request

I propose adding a wordWrap property to prevent words from wrapping in the middle. What are your thoughts on this?

Based on https://github.com/excaliburjs/Excalibur/commit/51ea101c9305ae90b6552266dc474dfde9ef58da, it seems that a lot of changes might be needed... Also, I can manage this by creating a wrapping method on the application side, so it’s not a high priority at all!

const text = new Text({
  text: 'Apple Banana Chocolate',
  maxWidth: 100,
  wordWrap: true
});
```</div>

[Autsider666]

Sounds like a really useful feature!

The name wordWrap is probably clear enough for most people, but did you consider that it could potentially confuse people used to writing css? Because word-wrap does something else in css, where white-space is used for the effect you're describing.

[eonarheim]

@Autsider666 Good point, I do like sticking to the CSS/webby way of referring to things. The fact that it does something completely different CSS makes me thing we should use whiteSpace instead and align with CSS.

Perhaps we should implement both the CSS wordWrap and whiteSpace?

[eonarheim]

The CSS spec is very helpful here it details all the rules https://drafts.csswg.org/css-text/#white-space-property

[Autsider666]

Perhaps we should implement both the CSS wordWrap and whiteSpace?

This is probably the best course of action if you want to stick to the same phrasing as css.

I really dislike the word choice for this specific feature in css though. I've to google it every time, because using whiteSpace feels so unintuitive for something that, to me, fits better with wordWrap (or even better: lineBreak)

[eonarheim]

I really dislike the word choice for this specific feature in css though. I've to google it every time, because using whiteSpace feels so unintuitive for something that, to me, fits better with wordWrap (or even better: lineBreak)

I have the same feelings, it throws me every time. But I agree it's probably best to be consistent with CSS even if I don't agree with their name choices.

[github-actions[bot]]

This issue hasn't had any recent activity lately and is being marked as stale automatically.