It seems that IE starting from IE7 to IE10 wraps text in the textarea control incorrectly when using \n (or \r\n - doesn't matter - results are the same). Is this a bug in IE or they treat the html standard differently than other browsers - who is right? I have defined:
<textarea id="TextArea1" runat="server" style="width: 190px; height: 390px; white-space: normal; word-wrap: normal; overflow: scroll" ></textarea>
When I try to add long string like "VeryLongStringEndingWithNewLine\n" by using JavaScript code (obj.value += text;) the text is shown in one line with scroll (this is ok) but added with an additional empty line (\r\n) - why?
When I try to add short string like "Short\n" multiple times, again via JavaScript code the text is on the same line (should be on the separate lines because normal wrapping should be applied).
Moreover when I do postback then all \r\n's are replaced with spaces (why?) and then text parsed correctly (assuming if I used spaces instead of crlf normal wraping with space only wraps when does not fit in the area).
When using FF or Chrome same control behaves correctly - long lines are shown without an additional empty next line, short lines are on the different lines, no replacement with spaces when doing postback.
I know I could probably use other options or white space characters, but I feel that above is not correct about IE. Any comments?
Under normal circumstances, textareas treat whitespace literally and wrap as needed.
But because you're overriding it with CSS, the result is potentially unstable.
In this case, whitespace (\n) is collapsing to a single space, since that's what white-space:normal does.
I'm not entirely sure what you're trying to achieve here, since I'm fairly sure the default behaviour for textareas is perfectly fine. If you don't want that behaviour, you shouldn't be using a textarea.
Related
The easiest way to describe my problem is by example: http://jsfiddle.net/trSwG/1/
The first paragraph is great, it's displayed exactly how I want it to. No matter how much white-space is added to the first line, it's truncated and isn't wrapped to the second line.
The second paragraph is where the problem lies. The space preceding the word "case" should not be included on this line, I want it to stay on the line above and act like how it does in the first paragraph.
The third paragraph is also fine, this is just to show that I want white-space to be preserved. It's also worth noting I don't want words broken (word-break: break-all).
I've attached a screenshot below, just in case it's rendering differently on your browsers. I'm using Chrome 28.0.1500.72 m:
You'll notice I'm using the lettering.js plugin to wrap every character inside a span, this is required for a feature we're developing.
What I've learnt so far:
It seems the spans are causing the problem, if you remove lettering call:
//$('p').lettering();
it all works as I need it. Somehow the spans are acting differently than normal text.
Update: The html itself cannot be manually edited either. It's created by a Flash content management tool and saved together with other properties as XML. There are thousands of these xml documents. The server has a chance to process the XML before it's sent as HTML to the front end, so any solution involving changing the html would need to be scripted.
EDIT
What about simply in CSS:
p {
width: 160px;
white-space: pre-line;
font-family: Arial;
font-size: 13px;
}
p:last-child {
white-space: pre-wrap;
}
Turned out to be a Chrome bug in version 28: https://code.google.com/p/chromium/issues/detail?id=246127
It's fixed in the currently beta version 29, only a matter of time before it gets pushed to the public build.
Server side, I build a list of strings which are the option text of an html select multiple.
Every string is the result of the concatenation of four strings. First, second and third have a length=5. Third string has a variable length, so I complete its length to 19 chars with white spaces:
StringUtils.rightPad(data.toUpperCase(), 19, " ");
Nevertheless, in my html page, these whites spaces are removed.
I have looked for similar problems in this web and others, I have tried with & nbsp;, \u0020, I have tried with css style white-space:pre-wrap;, I have tried a lot of things but white spaces are not preserved.
Any one knows how to solve this problem without javascript? only with html/styles.
Thank you, regards
The default styling in webpages is to collapse whitespace, you can easily change this with the white-space property in CSS:
p {
white-space: pre;
}
The values pre and pre-wrap preserve whitespace, the difference between them being that pre will only wrap the text on line-breaks, whereas pre-wrap will wrap on all whitespace characters (like regular text. Your question states that you have tried this and it did not work, however I have tested this code and it worked fine for me (using Google Chrome) and the W3C reference says that it works in all major browsers, therefore I suspect it is a mistake in implementation, try again and double-check you are applying styles to the correct class and there are no specificity issues.
I have a textarea. When I paste text with line breaks into it, the line breaks are automatically removed. But when I manually enter line breaks (hitting carraige return), they are preserved.
How do I force the textarea to preserve line breaks with pasted text?
Don't know if this applies to all browsers, but in Google Chrome (6 and 7), line breaks in pasted text gets removed if the textarea's style is set to white-space: nowrap;.
I used this style setting to prevent the default wrapping of long lines and experienced the same problem as yours. Later I realized that setting the textarea attribute wrap to off does a much better job. Be aware that wrap="off" is widely supported but not standardized.
The line breaks are always preserved when pasted on textarea.
Maybe the source have a different line break, you are copying from what program?
I came across an interesting problem today. I have a text email I'm sending from a Web page. I'm displaying a preview and wanted to put the preview in a fixed font retaining the white space since that's the way the plain text email will appear.
Basically I want something that'll act like Notepad: the newlines will signal a newline but the text will otherwise wrap to fit inside it's container.
Unfortunately this is proving difficult unless I'm missing something really obvious. I've tried:
CSS white-space: pre. This retains white space but doesn't wrap lines of text so they go out the borders on long lines;
Styling a textarea element to be read only with no border so it basically apepars like a div. The problem here is that IE doesn't like 100% heights on textareas in strict mode. Bizarrely it's OK with them in quirks mode but that's not an option for me.
CSS white-space: prewrap. This is CSS 2.1 so probably not widely supported (I'm happy if it's supported in IE7 and FF3 though; I don't care about IE6 for this as its an admin function and no one will be running IE6 that will use this page).
Any other suggestions? Can this really be that hard?
edit: can't comment so more info. Yes at the moment I am using font Courier New (i.e. fixed width) and using a regex on the server side to replace the newlines with <br> tags but now I need to edit the content and it just strikes me as awkward that you need to strip out and add the <br>s to make it work.
is there no better way?
Try
selector {
word-wrap: break-word; /* IE>=5.5 */
white-space: pre; /* IE>=6 */
white-space: -moz-pre-wrap; /* For Fx<=2 */
white-space: pre-wrap; /* Fx>3, Opera>8, Safari>3*/
}
Just replace all your hard line breaks with <br/> and put the text into a div with the desired width. You can do the same with spaces: Replace them with .
Be sure you do this after you escape the special characters into HTML, otherwise the are not interpreted but printed on the page.
Try replacing any double spaces with - which should work to make your look of double spaces come through.
Crack all those new line and hard enters out with <br />.
Style the text output to make it look like a fixed-width with the font-family:
font-family:monospace;
You may need to size it up properly, something smaller than the surrounding text, but that will give you the look of a PRE, and what a plain text email will look like.
Put it all in a DIV with a fixed with and that could be worth a look.
create a <pre></pre> tag or use something like
<p style="width:800px">
....
</p>
with fixed width, i think text are wrapped
Given a relatively simple CSS:
div {
width: 150px;
}
<div>
12333-2333-233-23339392-332332323
</div>
How do I make it so that the string stays constrained to the width
of 150, and wraps to a new line on the hyphen?
Replace your hyphens with this:
It's called a "soft" hyphen.
div {
width: 150px;
}
<div>
12333233323323339392332332323
</div>
In all modern browsers* (and in some older browsers, too), the <wbr> element is the perfect tool for providing the opportunity to break long words at specific points.
To quote from that link:
The Word Break Opportunity (<wbr>) HTML element represents a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.
Here's how it could be used to in the OP's example (or see it in action at JSFiddle):
<div style="width: 150px;">
12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>
*I've tested it in IE9, IE10, and the latest versions of Chrome, Firefox, and Opera, and Safari.
div {
width: 150px;
}
<div>
12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>
As part of CSS3, it is not yet fully supported, but you can find information on word-wrapping here. Another option is the wbr tag, , and none of which are fully supported either.
Your example works as expected in Google Chrome, Safari (Windows), and IE8. The text breaks out of the 150px box in Firefox 3 and Opera 9.5.
Additionally won't work for your example, as it will either:
work when word-breaking but when not word-breaking not display any hyphens, or
work when not word-breaking but display two hyphens when word-breaking
since it adds a hyphen on a break.
In this specific instance (where your string is going to contain hyphens) I'd transform the text to this server-side:
<div style="width:150px;">
<span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>
</div>
Depending on what you want to see exactly, you can use a combination of hyphen, soft hyphen, and/or zero width space.
On a soft hyphen, your browser can word-break (adding an hyphen).
On a zero width space, your browser can word break (without adding anything).
Thus, if your code is something like :
111111222222-333333444444-555555
then your browser will show this with no word-break :
1111112222222-33333334444444-5555555
and this will every possible word-break :
111111-
222222-
-333333
444444-
555555
Just pick up the option you need. In your case, it may be the one between 4s and 5s.
You can also use :
word-break:break-all;
ex.
<div style='width:10px'>ababababababbabaabababababababbabababa</div>
output:
abababababa
ababababbba
abbabbababa
ababb
word-break is break all the word or line even if no-space in sentence that not feets in provided width or height. nut for that you must be provide a width or height.
The non-breaking hyphen works well.
HTML Entity (decimal)
‑
Instead of - you can use ‐ or \u2010.
Also, make sure the hyphens css property was not set to none (The default value is manual).
<wbr> is not supported by Internet Explorer.
Hope this may help
use <br>(break) tag where you want to break the line.
You can use 0 width space after hyphen character:
div {
width: 150px;
}
<div>
12333-2333-233-23339392-332332323
</div>
if You want line break before hyphen use - instead.