Word wrap and a maximum character limit

I am looking for the functionality of a string input component to be able to have word wrap and a set maximum character limit.

The intent is to have a text field for a long string that will be pushed into a database column. I need to set the maximum character limit to ensure the characters I send to the database are less than the column I have set up in the database. I also want to have word wrap to allow the user to see their entire entry without having to scroll.

I see three potential options:

  1. Text Field: Has property for maximum character limit but not word wrap.
  2. Text Area: Has property for word wrap but not maximum character limit.
  3. Formatted Text Field: Regex property can be set for maximum character limit, unsure about word wrap.

One of my concerns is that with word wrap you might get two additional hidden characters '/n' for each wrap. If that is the case, then I want those hidden characters to be counted in the maximum character limit to ensure the entry stays within the constraint of maximum characters for the database column.

I feel this is a common task, so there must be some easy method of doing this that I am overlooking.

Only a text area can wrap. Text fields are fundamentally single-line in web browsers.

I recommend you simply disable your save button if the string is too long or otherwise unacceptable. Style the field to hint at the problem.

This is not the case. The text property of the text area component in Vision will not contain any hidden word wrapping characters.