 How to Break line after a special character, How to Break line after a special character |
  |
| Sachin Gupta |
 Sep 14 2021, 08:25 AM
Post
#1
|
|
Newbie  Group: Members Posts: 15 Joined: 14-December 20 Member No.: 27,685  |
Dear All,
I have one HTML Script which generate a table and fields input from some database table. There is one field in my table name NC Details , i want whenever field input finds a special character like "-" . it should shift the rest of the text in new line. Kindly be noted NC Details filed gets data from some application so user writes text there , here i am using HTML just to get the table design. below is the code i am writing in NC Details field [code] <tr> <td style="vertical-align: middle; background-color: #E1F8DA;"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>NC Details</strong></span></td> <td style="vertical-align: middle;" ><span style="color: #000000;"><strong>['NCDETAILS']</strong></span></td> </tr> ['NCDETAILS'] is input field column name which gets data from application, Please advise |
  |
 
|
| Brian Chandler |
Sep 14 2021, 09:16 AM
Post
#2
|
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
Unless I'm missing something, you simply use <br> as your "special character", and this then creates an HTML "newline". If the text is somehow fixed in a different format, you will need to make your server script replace the newline indication by <br>.
|
|
|
|
| Sachin Gupta |
Sep 14 2021, 11:49 PM
Post
#3
|
|
Newbie Group: Members Posts: 15 Joined: 14-December 20 Member No.: 27,685 |
QUOTE(Brian Chandler @ Sep 14 2021, 09:16 AM)  Unless I'm missing something, you simply use <br> as your "special character", and this then creates an HTML "newline". If the text is somehow fixed in a different format, you will need to make your server script replace the newline indication by <br>. Hello Brian Chandler, This is working perfectly for my case , very much thankful to you.my problem solved very easily |
|
|
|
| Sachin Gupta |
Sep 21 2021, 12:27 AM
Post
#4
|
|
Newbie Group: Members Posts: 15 Joined: 14-December 20 Member No.: 27,685 |
Hello All,
I have showed this to my management and they don't want to mention <br> in the form text , can we configure ENTER or TAB button for the same . for example while writing whenever user press TAB or ENTER , it should consider the text from next line. overall i want to replace <br> with ENTER or TAB Please advise  This post has been edited by Sachin Gupta: Sep 21 2021, 12:52 AM |
|
|
|
| Brian Chandler |
Sep 21 2021, 12:49 AM
Post
#5
|
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
QUOTE(Sachin Gupta @ Sep 21 2021, 02:27 PM) Hello Brian Chandler, Please don't just ask me! Others may also be able to help... So do I have this right: in your DB you have text data which gets accessed and put into an html page? So where is the program that does this (generating the page)? You just have to change it to convert newline characters in the text to '<br>' for the html document. |
|
|
|
| Sachin Gupta |
Sep 21 2021, 01:19 AM
Post
#6
|
|
Newbie Group: Members Posts: 15 Joined: 14-December 20 Member No.: 27,685 |
QUOTE(Brian Chandler @ Sep 21 2021, 12:49 AM) QUOTE(Sachin Gupta @ Sep 21 2021, 02:27 PM) Hello Brian Chandler, Please don't just ask me! Others may also be able to help... So do I have this right: in your DB you have text data which gets accessed and put into an html page? So where is the program that does this (generating the page)? You just have to change it to convert newline characters in the text to '<br>' for the html document. yes you are right ,That program is in Power Automate which generate the HTML Page. and here is the code which generates html page. how can i find and replace here , i fond few example that sis throgh Jquery , i am not aware of it. [/code] <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <table width="100%" border="3"> <tbody> <tr> <td colspan="7" style="text-align: left; background-color: #2e3692;"> <img src="http://beebuzz.bee.local/wp-content/uploads/2019/08/ncr-2020-Copy.png" width="492" height="93" alt=""/><strong style="font-size: 50px; color: white;"><img src="http://beebuzz.bee.local/wp-content/uploads/2019/08/ncr-clipart.png" width="100" height="112" alt=""/></strong><img src="http://beebuzz.bee.local/wp-content/uploads/2019/08/office-work.gif" width="250" height="100" /></td> </tr> <tr> <td style="vertical-align: middle; background-color: #E1F8DA;"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>NC Details</strong></span></td> <td style="vertical-align: middle;" ><span style="color: #000000;"><strong><div> @{items('Apply_to_each')?['NCDETAILS']}</div></strong></span></td> </tr> </tbody> </table> </body> </html> |
|
|
|
| Brian Chandler |
Sep 21 2021, 02:21 AM
Post
#7
|
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
CODE <div> @{items('Apply_to_each')?['NCDETAILS']}</div> I'm sorry, I have no idea. If "Power Automate" processes this @ thing, you need to ask experts in Power Automate. I doubt if anyone else here knows about this either. |
|
|
|
| Christian J |
Sep 21 2021, 06:09 AM
Post
#8
|
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
Possibly you could use the PRE element with linebreak characters like \n instead of BR.
|
 |
|
| Brian Chandler |
Sep 21 2021, 06:31 AM
Post
#9
|
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
QUOTE(Christian J @ Sep 21 2021, 08:09 PM) Possibly you could use the PRE element with linebreak characters like \n instead of BR. Yes, but then the text won't wrap, which is generally No Good. |
|
|
|
| Christian J |
Sep 21 2021, 06:06 PM
Post
#10
|
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
CSS then:
CODE <td style="white-space: pre-line;"> Lorem ipsum dolor sit amet- consectetuer adipiscing elit- sed diam nonummy nibh euismod- tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper uscipit lobortis nislut aliquip ex ea commodo consequat. </td> From the spec: QUOTE "This value directs user agents to collapse sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes." https://www.w3.org/TR/CSS21/text.html#propdef-white-space So you add a newline after the "-" characters (using say the Enter key, if you do it manually), then the line of text will break there but also to fill the table cell. As a sidenote, the following is invalid: QUOTE CODE <td style="vertical-align: middle;" ><span style="color: #000000;"><strong><div> @{items('Apply_to_each')?['NCDETAILS']}</div></strong></span></td> The DIV element can't be inside SPAN or STRONG. You can also simplify the HTML, by either remove the SPAN element and instead style STRONG, or remove STRONG and style SPAN to look bold. |
|
|
|
| Sachin Gupta |
Oct 4 2021, 03:25 AM
Post
#11
|
|
Newbie Group: Members Posts: 15 Joined: 14-December 20 Member No.: 27,685 |
Hello Christian J,
Thanks for looking into this , i applied your solution but lines are not breaking. Please see the below. My Code after adding [code] <td style="white-space: pre-line;"><span style="color: #000000;"><strong>['NCDETAILS']</strong></span></td> Please advise , if i am making any mistake , lines are not breaking it comes as a simple text |
|
|
|
| Christian J |
Oct 4 2021, 05:53 AM
Post
#12
|
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
QUOTE(Sachin Gupta @ Oct 4 2021, 10:25 AM) <td style="white-space: pre-line;"><span style="color: #000000;"><strong>['NCDETAILS']</strong></span></td> Not sure I understand, the only plain text in the example above is ['NCDETAILS'], which contains no line breaks. But in an earlier post you used this: CODE @{items('Apply_to_each')?['NCDETAILS']} which looks like server-side scripting. Could you post a code example showing the HTML table cell's contents as seen when viewing source in a web browser? |
|
|
|
| pandy |
Oct 4 2021, 06:38 AM
Post
#13
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Yeah. AFAIK white-space: pre-line is well-supported. Must be something amiss with the output from the database, like no newline character.
|
|
|
|
| Sachin Gupta |
Oct 7 2021, 05:12 AM
Post
#14
|
|
Newbie Group: Members Posts: 15 Joined: 14-December 20 Member No.: 27,685 |
QUOTE(Christian J @ Oct 4 2021, 05:53 AM) QUOTE(Sachin Gupta @ Oct 4 2021, 10:25 AM) <td style="white-space: pre-line;"><span style="color: #000000;"><strong>['NCDETAILS']</strong></span></td> Not sure I understand, the only plain text in the example above is ['NCDETAILS'], which contains no line breaks. But in an earlier post you used this: CODE @{items('Apply_to_each')?['NCDETAILS']} which looks like server-side scripting. Could you post a code example showing the HTML table cell's contents as seen when viewing source in a web browser? Hello Christian , we have code editor in Power automate which receive HTML code as input and generates the output. the filed CODE @{items('Apply_to_each')?['NCDETAILS']} is the field which contains gets text value from the Form and the whole code generates the HTML template. This is the HTML code. CODE @<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <table width="100%" border="3"> <tbody> <tr> <td colspan="7" style="text-align: left; background-color: #2e3692;"> <img src="http://beebuzz.bee.local/wp-content/uploads/2019/08/ncr-2020-Copy.png" width="492" height="93" alt=""/><strong style="font-size: 50px; color: white;"><img src="http://beebuzz.bee.local/wp-content/uploads/2019/08/ncr-clipart.png" width="100" height="112" alt=""/></strong><img src="http://beebuzz.bee.local/wp-content/uploads/2019/08/office-work.gif" width="250" height="100" /></td> </tr> <tr> <td style="vertical-align: middle; background-color: #E1F8DA;"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>NC Details</strong></span></td> <td style="vertical-align: middle;" ><span style="color: #000000;"><strong>@{items('Apply_to_each')?['NCDETAILS']}</strong></span></td> </tr> <tr> <td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Material cost</strong></span></td> <td><strong>@{items('Apply_to_each')?['MATERIALCOST']}</strong></td> <td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Extra Cost</strong></span></td> <td><strong>@{items('Apply_to_each')?['EXTRACOST']}</strong></td> <td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Idle/Delay</strong></span></td> <td><strong>@{items('Apply_to_each')?['IDLEDELAY']}</strong></td> </tr> <tr> <td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Lost Time reporter</strong></span></td> <td><strong>@{items('Apply_to_each')?['LOSTTIME_REPORTER']}</strong></td> <td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Lost Time assignee</strong></span></td> <td><strong>@{items('Apply_to_each')?['LOSTTIME_ASSIGNEE']}</strong></td> <td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Production /Operation Lost Time</strong></span></td> <td><strong>@{items('Apply_to_each')?['LOSTTIME_PRODUCTION']}</strong></td> </tr> </tbody> </table> </body> </html> HTML code read the fields value and display it on template. |
|
|
|
| Christian J |
Oct 7 2021, 05:48 AM
Post
#15
|
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
No, I was thinking of what you wrote in the first post:
QUOTE i want whenever field input finds a special character like "-" . it should shift the rest of the text in new line. We need to see the text with the "-" special characters to find out why "white-space: pre-line" is not working. |
|
|
|
| pandy |
Oct 7 2021, 06:37 AM
Post
#16
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
white-space: pre-line also needs to actually be used for that TD. I can't see it is.
 QUOTE CODE <td style="vertical-align: middle;" ><span style="color: #000000;"><strong>@{items('Apply_to_each')?['NCDETAILS']}</strong></span></td> |
|
|
|
| Sachin Gupta |
Oct 11 2021, 11:47 PM
Post
#17
|
|
Newbie Group: Members Posts: 15 Joined: 14-December 20 Member No.: 27,685 |
QUOTE(pandy @ Oct 7 2021, 06:37 AM) white-space: pre-line also needs to actually be used for that TD. I can't see it is. QUOTE CODE <td style="vertical-align: middle;" ><span style="color: #000000;"><strong>@{items('Apply_to_each')?['NCDETAILS']}</strong></span></td> Hello Pandy, I pasted the old code by mistake , here is the one i am trying but not reading white space and breaking line. CODE @<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <table width="100%" border="3"> <tbody> <tr> <td colspan="7" style="text-align: left; background-color: #2e3692;"> <img src="http://beebuzz.bee.local/wp-content/uploads/2019/08/ncr-2020-Copy.png" width="492" height="93" alt=""/><strong style="font-size: 50px; color: white;"><img src="http://beebuzz.bee.local/wp-content/uploads/2019/08/ncr-clipart.png" width="100" height="112" alt=""/></strong><img src="http://beebuzz.bee.local/wp-content/uploads/2019/08/office-work.gif" width="250" height="100" /></td> </tr> <tr> <td style="white-space: pre-line;"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>NC Details</strong></span></td> [b]<td style="vertical-align: middle;" ><span style="color: #000000;"><strong>@{items('Apply_to_each_4')?['NCDETAILS']}</strong></span></td>[/b] </tr> <tr> <td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Material cost</strong></span></td> <td><strong>@{items('Apply_to_each')?['MATERIALCOST']}</strong></td> <td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Extra Cost</strong></span></td> <td><strong>@{items('Apply_to_each')?['EXTRACOST']}</strong></td> <td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Idle/Delay</strong></span></td> <td><strong>@{items('Apply_to_each')?['IDLEDELAY']}</strong></td> </tr> <tr> <td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Lost Time reporter</strong></span></td> <td><strong>@{items('Apply_to_each')?['LOSTTIME_REPORTER']}</strong></td> <td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Lost Time assignee</strong></span></td> <td><strong>@{items('Apply_to_each')?['LOSTTIME_ASSIGNEE']}</strong></td> <td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Production /Operation Lost Time</strong></span></td> <td><strong>@{items('Apply_to_each')?['LOSTTIME_PRODUCTION']}</strong></td> </tr> </tbody> </table> </body> </html> This post has been edited by Sachin Gupta: Oct 11 2021, 11:49 PM |
|
|
|
| Sachin Gupta |
Oct 12 2021, 01:13 AM
Post
#18
|
|
Newbie Group: Members Posts: 15 Joined: 14-December 20 Member No.: 27,685 |
QUOTE(Sachin Gupta @ Oct 11 2021, 11:47 PM) QUOTE(pandy @ Oct 7 2021, 06:37 AM) white-space: pre-line also needs to actually be used for that TD. I can't see it is. QUOTE CODE <td style="vertical-align: middle;" ><span style="color: #000000;"><strong>@{items('Apply_to_each')?['NCDETAILS']}</strong></span></td> Hello Pandy, I pasted the old code by mistake , here is the one i am trying but not reading white space and breaking line. CODE @<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <table width="100%" border="3"> <tbody> <tr> <td colspan="7" style="text-align: left; background-color: #2e3692;"> <img src="http://beebuzz.bee.local/wp-content/uploads/2019/08/ncr-2020-Copy.png" width="492" height="93" alt=""/><strong style="font-size: 50px; color: white;"><img src="http://beebuzz.bee.local/wp-content/uploads/2019/08/ncr-clipart.png" width="100" height="112" alt=""/></strong><img src="http://beebuzz.bee.local/wp-content/uploads/2019/08/office-work.gif" width="250" height="100" /></td> </tr> <tr> <td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>NC Details</strong></span></td> <td style="vertical-align: middle; white-space: pre-line;" ><span style="color: #000000;"><strong>@{items('Apply_to_each_4')?['NCDETAILS']}</strong></span></td> </tr> <tr> <td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Material cost</strong></span></td> <td><strong>@{items('Apply_to_each')?['MATERIALCOST']}</strong></td> <td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Extra Cost</strong></span></td> <td><strong>@{items('Apply_to_each')?['EXTRACOST']}</strong></td> <td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Idle/Delay</strong></span></td> <td><strong>@{items('Apply_to_each')?['IDLEDELAY']}</strong></td> </tr> <tr> <td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Lost Time reporter</strong></span></td> <td><strong>@{items('Apply_to_each')?['LOSTTIME_REPORTER']}</strong></td> <td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Lost Time assignee</strong></span></td> <td><strong>@{items('Apply_to_each')?['LOSTTIME_ASSIGNEE']}</strong></td> <td style="background-color: #E1F8DA;border: none"><span style="color: #333399; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'"><strong>Production /Operation Lost Time</strong></span></td> <td><strong>@{items('Apply_to_each')?['LOSTTIME_PRODUCTION']}</strong></td> </tr> </tbody> </table> </body> </html> below text i am filling in the field. QUOTE I am testing below- Test1- Test2- Test3- Test4- Test5, i am hitting enter after each "-" This post has been edited by Sachin Gupta: Oct 12 2021, 01:41 AM |
|
|
|
| pandy |
Oct 12 2021, 03:25 AM
Post
#19
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
In your first post above you use the white-space: pre-line in the wrong TD. In the second you use it in the right TD. Which of them do you actually use?
If that wasn't the problem, as Christian said we need to see the output from the server side script. Go to the page with a browser, view source, copy the relevant bit and paste it in here. |
|
|
|
| Brian Chandler |
Oct 12 2021, 04:04 AM
Post
#20
|
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
It looks to me as though the OP originally wanted to be able to represent a newline by some arbitrary character - in this case a hyphen, and is hoping that some magic will cause this hyphen to be turned into a newline in the HTML display. But this particular piece of magic is not within CSS's repertoire, so this is not going to work. He says "hitting Enter after the hyphen", but who knows what effect this has on some random "HTML script"?
Can anyone explain any sort of semantics of the bizarre string "white-space: pre-line"? Three English words and one English prefix, with no obvious meaning. |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 23rd April 2024 - 03:58 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC