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
Related
On my webpage I've used fancybox for preview section of description text in popup. Text shows perfectly fine on desktop but on popup it shows something like this.
Please note that the descriptive text I'm getting for the display it include for each space user gives for the sentence after each word.
and when I use word-break: break-all; it gets like this
then I've used word-break:break-word; also and get this
you can spot the difference now, that it breaks word viz clearly not acceptable. I want to break sentences meaningfully not the word!
Problem is I can only use HTML/CSS only here for fixing this, have looked many que/ans here but no luck.
Please help me into this.
I've created a JSFiddle please look into this may be this will help to understand clearly.
Note: If you don't want to modified server side scripts, you can use this JavaScript solution instead. I don't think you can do so with CSS only without doing any amendments in your server side code to remove these &nbps;.
In that case, you should first decode HTML special chars to simple text using following JavaScript code.
var text = $("<textarea/>").html('your HTML encoded text here with and all').text();
$('your viewing div/p selector').html(text);
And add this CSS property in your viewing div or p.
white-space: pre-wrap;
It should work.
Use word-wrap:break-word;
It even works in IE.
There are many possible values of the css "word-break" property.
http://www.w3schools.com/cssref/css3_pr_word-break.asp
word-break:break-word;
https://jsfiddle.net/1acbtr82
word-break:keep-all;
https://jsfiddle.net/dabros/1acbtr82/1/
The first works fine but does break up "googling" into "googlin-g", the second refuses to even do that.
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.
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.
I have a comment section which is of a certain width. When I post a long URL, this text is overlapping as there is no spaces in between. How to fix this in HTML
As far as I know there's no HTML way to do this. Since it's display/design related you can use CSS:
overflow: hidden;
This might work too:
word-wrap: break-word;
Overflow & Word-wrap links.
Edit: overflow: hidden will hide the text that extends beyond the size of its container and word-wrap: break-word should force a break in the word.
You have a few options. You could amend your comment system server-side so that it automatically puts in a line break if a word is over a certain length.
Or, you could set the CSS style overflow to hidden, scroll, or something like that to prevent the containing DIV of the comment from being stretched - that could do the trick too.
There is no solution in pure HTML. If you can use JavaScript or AJAX, you can convert the URL into a real link and replace the text part with only the first 20-30 characters of the URL: http://some.com/a...
For some reason my paragraphs are displaying line breaks when there is no <br/> tag being used! So if I type content into the HTML and hit return a few times it gets formatted that way.
How can I prevent that? Can I not just get it to flow?
Browsers will automatically render paragraph tags to have some padding unless you explicitly style it not to... is this the problem?
If so, p {padding: 0; margin:0;}
If not, try giving us some of your code and a better explanation of exactly what the problem is.
Put this into your stylesheet:
p {white-space:normal;}
The <pre> tag will cause white space to display. So will a CSS rule like this:
p {white-space: pre;}
Could either of those be the problem?
If the text is being broken to make it fit, you cannot / should not try to stop the text from breaking. However, if your problem is that the text is breaking at an undesirable point and you would rather have it break at a more appropriate point, use the following:
<nobr>... Unwanted break point here ...</nobr>
enclose the unwanted break point with nobr tags.
And, add the following at the appropriate break point:
... some text ... Text on next line