how to break last character only in textarea-CodePudding

How to break last character only in textarea instead of whole words when exceed the max width? Example below

Sample text

1. The cash voucher is only valid a physical stores

My max width able to reach until 1. The cash voucher is only valid a physical store then the 'stores' will auto break to next line as default becomes

1. The cash voucher is only valid a physical

stores

Expected output

How I do break the 's' to next line only?

1. The cash voucher is only valid a physical store

s and more.....

Sample code I tried

<textarea disabled style="width: 272.12px; overflow: normal ;border: none; outline: none;" id="footerReceipt" ></textarea>

CodePudding user response：

You want to use the CSS property and value line-break: anywhere.

textarea {
  line-break: anywhere
}

<textarea cols="48">1. The cash voucher is only valid a physical stores</textarea>

CodePudding user response：

Try word-break: break-all;

Here is the documentation for word-break.

CodePudding user response：

You can adjust the columns of the textarea by adding the cols="50" inside the textarea tag. You don't need to add the style="width: 272.12px; overflow: normal ;border: none; outline: none;" id="footerReceipt" because it's not supported in textarea (maybe). So it will be like this.

<textarea disabled rows="10" cols="50">1. The cash voucher is only valid a physical stores</textarea> If the s is not in the new line, try adjusting the number in the cols="" until it works.