The line breaks after certain characters Eg: 20 characters and move to the next line also the font size decreases as new lines gets added

[Shivakumarcm1]

Hi All,

Greetings or the day!

Im trying to build an app which collects the text the user types and displays it on the screen.

background: I'm trying to build an App where the the user is able to type the message in the text box and the text is displayed in the label.
So far I'm able to achieve this and but the conditions here is that when the user types the text its displaying in a single line.
i changes the settings to multiple line but the text moves to text line after a long set of characters.
I tried exploring on YouTube and didn't get any idea close to the my requirements.

Problem: I'm trying to move the text to the next line after after 20 characters which I'm not sure how to go about  in this situation.
I tried using the HTML text and used the formula but didn't work.

Looking for some guidance on how to set the rule for each line to break and move to next line after 20 characters and also if possible help me reducing the font size every time i move to the next line. As I'm a beginner have less knowledge on PowerApps.
I've attached the screen that I've developed so far.

Looking forward for guidance.
Thanks in advance. 

[Shivakumarcm1]

I was able to figure out how to reduce the font size after certain set of characters.

[Shivakumarcm1]

I Have a text box where i type a message and a HtmlText to display the output of the Textinput.
I've written html code to break the line after certain length of characters using if condition but its not work.
here is the code that ive been using and didnt find any success.
code: 
"<div align = 'center'><font face = Century725 BT)>" &
If(Len(TextInput1.Text)<16,"<br>",
Len(TextInput1.Text)<33, "<br>",
Len(TextInput1.Text)<51,"<br>",
Len(TextInput1.Text)<77,"<br>",
Len(TextInput1.Text)<99,"<br>","<br>") & TextInput1 &"</div></font>"

Could anyone help me on how to proceed further?

[BCBuizer · Accepted solution]

Hi @Shivakumarcm1,

The issue with your code is that it will stop running after the first condition is met. Therefore you have to introduce some sort of loop.

I did a little bit of experimenting and got this to work by setting it in the OnChange property of a TextInput control:

Clear(_temp);
ForAll(
	Sequence(
		RoundUp(
			Len(
				TextInput1.Text
			)/20,
			0
		)
	),
	Collect(
		_temp,
		Replace(
			Replace(
				TextInput1.Text,
				1,
				(Value-1)*20, 
				""
			),
			21,
			1000,
			""
		)
	)
);
UpdateContext(
	{_html: Concat(_temp,Value,"<br>")}
);

The output of this is a context variable (_html) which includes the text from the same TextInput and after every 20th character has a "<br>" tag inserted. This variable can then be used to get the html code. In below screenshot you see how this works both in an HTMLText control and a regular label:

[Shivakumarcm1]

Hi @BCBuizer ,

Greetings for the day!
Thank you for the solution. it works as expected.
Thank you got your time and solution.

Kind regards,
Shivakumar

[Shivakumarcm1]

Hi @BCBuizer,

If i had to align the text at the center (Vertically and horizontally) of the HTML text control? 
I tried to use the code:

<div style='text-align:center'>,

it gets center horizontally. When i tried aligning it vertically it was not possible.
I tried padding, didn't work.
Any input/ suggestions.

[Shivakumarcm1]

Go the text aligned to the middle of html box by using the following code:
"<div style='width:350px;height:190px;display:table-cell;text-align:center;vertical-align:middle'><font face = 'Century725 BT'>"& _htmlinput &"</div>"

[BCBuizer]

Hi @Shivakumarcm1,

Can you please open a new topic for this new question? Like that it is easier for members of the community to find solutions to their questions.