I'm trying to display a txt file in the browser while maintining it's format and layout. Now i have accomplished this with sucess using both the pre tag and white-spaces.
My problem with the pre tag is the space it adds before and after the line (i don't need that).
white-spaces works perfectly, but sometimes there will be a random line (or lines) wich will truncate.
I'm testing this only on IE (since it's for an intranet and folks here won't touch another browser).
When i see the source code on IE the lines wich are truncated have the correct white-spaces tag, but it does not display correctly on the browser.
<p style="white-space: pre;display: inline;"> Any kind of text here </p>
Is this the browser's fault or my mistake?
Is there a better way to do this?
Is there a way to remove the spaces before and after the line from the pre tag?
Thank you all
Pre tag doesn't add space before and after a line, other than the space in the text there (4 spaces before Any, 1 space after here).
There may be another tag that is creating margin. <body> by default, has 8px margins.
Also tried placing two <p> back to back, and no newlines separated the tags.
Testing the following in a html file:
<body style="margin: 0px; font-family: 'Courier New',Courier, monospace"><p style="white-space: pre;display: inline; margin: 0px;"> Any kind of text here </p><p style="white-space: pre;display: inline; "> Any kind of text here </p></body>
In the end i followed the suggestions here:
HTML <pre> tag causes linebreaks
Worked without a flaw.
Related
I have the following HTML to render a date input box with an icon:
#if (Model.ShowThis){
<input id="box1" type="hidden" value="#Model.SelectedDate.ToString("yyyy-MM-dd")" size="10" />
<span id="icon1" class="picture"></span>
}
You'll notice that the icon is shifted to the right. If I modify the code to be:
#if (Model.ShowThis){
<input id="box1" type="hidden" value="#Model.SelectedDate.ToString("yyyy-MM-dd")" size="10" /><!--
--><span id="icon1" class="picture"></span>
}
you will notice that there is no longer a shift due to the removal of any potential white space. Without these comments, I can go into the debugger and see extra spacing between the elements, which once removed, fixes the problem as well.
Why are standard new lines within a .cshtml file (inside a Razor block) causing there to be non-breaking spaces between these HTML elements? I have never seen this behavior before in other files in the same type of scenario.
You're seeing white-space in your HTML document rendered as these are both inline-block elements, I'm guessing.
Think of them not as elements on a page, then, but words in a sentence. The browser does it this way. So, if I put:
<div>
Here
is
a
sentence.
</div>
in HTML, I'd expect to see:
Here is a sentence.
in my document. This is because HTML interprets aggregate strings of white-space (including line breaks and register returns) as cumulatively one space when rendering. It expects a tag to forcibly break a line, if that's the desire. Given white-space: normal (the CSS default), if there's not enough space for the text on the line, then it will wrap. This allows for well-formatted and readable HTML (which is an aside, but it's important to understand why it works this way).
It's the same story with inline or inline-block elements. They're handled much like text in layout, and thus respect surrounding white-space. That's good, because that's intended behavior for inline elements. You just need to make some special considerations when you lay out your document using those display properties.
Either leave your HTML comment in the code, or use this pattern in CSS:
.container {
font-size: 0;
}
.container > * {
font-size: 1rem;
}
where .container is whatever wrapper you have around the offending elements.
It's not a Razor thing; even static HTML would have the same problem. Whitespace will unfortunately affect layout, whether it's line breaks or spaces.
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.
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
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