I am creating a form for medical prescription. Here one of the textarea field name is new prescription. Doctor will insert value here like
1. medicine-l
1+1+1
2. medicine-2
1+0+1
But while I print out the prescription this new prescription field shows it's value like
1.medicine-1 1+1+1 2.medicine-2 1+0+1
But I want to printout the value of new prescription just like how doctor inserted.
How can I do it? Anybody Help Please ?
The line breaks are actually preserved untill you print the text out. HTML doesn't doesn't detect the line breaks in the text.
Try this for JS:
textAreaText.replace(/(?:\r\n|\r|\n)/g, '<br>');
How do I replace all line breaks in a string with <br /> tags?
Try this for PHP :
http://php.net/manual/en/function.nl2br.php
You should be able to do this using the CSS property white-space.
Example:
.textarea-class {
white-space: pre-wrap;
}
Consult the MDN docs for a very nice overview if the various options, but it seems like you want either pre (just as it is), pre-wrap (maintains spacing and line breaks, but wraps), or even pre-line (maintains line breaks but not spacing, and wraps).
You’ll want to put this in your print stylesheet.
Related
I have an MVC3 app that has a details page. As part of that I have a description (retrieved from a db) that has spaces and new lines. When it is rendered the new lines and spaces are ignored by the html. I would like to encode those spaces and new lines so that they aren't ignored.
How do you do that?
I tried HTML.Encode but it ended up displaying the encoding (and not even on the spaces and new lines but on some other special characters)
Just style the content with white-space: pre-wrap;.
div {
white-space: pre-wrap;
}
<div>
This is some text with some extra spacing and a
few newlines along with some trailing spaces
and five leading spaces thrown in
for good
measure
</div>
have you tried using <pre> tag.
<pre>
Text with
multipel line breaks embeded between pre tag
will work and
also tabs..will work
it will preserve the formatting..
</pre>
You can use white-space: pre-line to preserve line breaks in formatting. There is no need to manually insert html elements.
.popover {
white-space: pre-line;
}
or add to your html element style="white-space: pre-line;"
You would want to replace all spaces with (non-breaking space) and all new lines \n with <br> (line break in html). This should achieve the result you're looking for.
body = body.replace(' ', ' ').replace('\n', '<br>');
Something of that nature.
I was trying the white-space: pre-wrap; technique stated by pete but if the string was continuous and long it just ran out of the container, and didn't warp for whatever reason, didn't have much time to investigate.. but if you too are having the same problem, I ended up using the <pre> tags and the following css and everything was good to go..
pre {
font-size: inherit;
color: inherit;
border: initial;
padding: initial;
font-family: inherit;
}
As you mentioned on #Developer 's answer, I would probably HTML-encode on user input. If you are worried about XSS, you probably never need the user's input in it's original form, so you might as well escape it (and replace spaces and newlines while you are at it).
Note that escaping on input means you should either use #Html.Raw or create an MvcHtmlString to render that particular input.
You can also try
System.Security.SecurityElement.Escape(userInput)
but I think it won't escape spaces either. So in that case, I suggest just do a .NET
System.Security.SecurityElement.Escape(userInput).Replace(" ", " ").Replace("\n", "<br>")
on user input.
And if you want to dig deeper into usability, perhaps you can do an XML parse of the user's input (or play with regular expressions) to only allow a predefined set of tags.
For instance, allow
<p>, <span>, <strong>
... but don't allow
<script> or <iframe>
There is a simple way to do it. I tried it on my app and it worked pretty well.
Just type: $text = $row["text"];
echo nl2br($text);
I have this:
data.data.message = 'User created';
app.successMsg = data.data.message + '...Redirecting';
And I want to add a line before the ...Redirecting. I've tried \n, \r, both together but it's not working. I've also read some articles here but they all tell them to use the \n and \r but it's not working for me. I'm just learning so be patient please.
---------------------------------------------------------------EDIT--------------------------------------------------------------
When I use '<br />.... Redirecting' this happens:
Thanks!
You may use <br/> tag to get a new line.
apart of that, you may use any block element(e.g. div) to show it to other line. it actually puts it in another element and block element is always rendered in new line so data goes to next line. you can then apply css to it as well.
If you run it in a browser, then my guess is it's rendered as HTML. HTML ignores newlines, and puts everything on the same line. So you could either put the above text between <pre> brackets, or echo our <br /> where you want a new line. Hope that helps.
It seems not,as they are showing up as cleartext.
I am trying to format a rather large tootlip by inserting <p> and <br>, but, as I say, Chrome treats them as text.
What am I allowed to put into such a tooltip? Anything other than a single string?
Since \n seems to be ignored, is there any way to get a line break into such a string?
You can add symbol for a new line:
(\r) or
(\n) to your title.
test
Another option is to find some JavaScript tooltip library.
If you feed them actual line breaks, they will work.
<span title="Two
Liner">Hover here</span>
However, if you need more complex HTML inside, I'd suggest qTip or Bootstrap's tooltips
Is it possible to style the contents of a textarea with CSS? I need to at the very least, insert more space after line breaks.
I want to basically have a new paragraph of text start within the textarea after every carriage return or line break.
You can't style the content of a textarea. All you can do is insert more whitespace manually.
One approach is to replace single carriage returns with double ones
This can be done with either Javascript or PHP...
JS: str.replace("\r\n", "<br />");
http://www.w3schools.com/jsref/jsref_replace.asp
PHP: str_replace("\r\n", "<br />", "whatyouaresearching", "number of replacements you want to make")
http://php.net/manual/en/function.str-replace.php
These are "String Replace" functions. So essentially what we are doing is searching a given string for a certain value and replacing it with another value.
Edit: Looks like I may have incorrectly assumed that the text area would interpret correctly. OP, have you tried yet? If that doesn't work, then try using the HTML Entity Code as the replace value:
http://www.w3schools.com/tags/ref_ascii.asp
I've got a StyleableTextField in my mobile project, which gets filled with html text using the .htmlText property.
The tag is working fine for me, but simple line breaks or paragraphs are simply ignored. What can I do about that?
Basically, the simplest HTML will just be displayed as a single line:
textField.htmlText = "<p>this should be the first line</p><p>this the second one</p>";
Again, the output is a single line.
The Flex 3 doc states that those tags are definitely supported, so I reckon they simply removed it in the newer versions (which is kinda ridiculous!).
I don't want to use the stagewebview, so what other ways to I have to properly format HTML using the StyleableTextField, or is there a simple replacement for the aforementioned tags?
Thank you very much guys!
Make sure that multiline is set to true, otherwise it will treat it as a single line of text, effectively ignoring the formatting.