I am storing a text in a SQL server database as a varchar(MAX).
I have to display this text in my web page.
The problem is that the text contains line break.
When I go in the HTML source code, I can see the line breaks but it does not display them in the web page.
Thanks for your help!
Line breaks are ignored in HTML at the display level. Replace these linebreaks with <br/> tags:
SELECT REPLACE(column_name, CHAR(13) + CHAR(10), '<br/>')
FROM table_name
instead of storing line break in database, store the HTML content with all the formatting and tags.
There is one way around this without manipulating your SQL. Use a paragraph tag WITHIN a pre tag like so...
<pre><p>Your SQL Would Go Here</p></pre>
You can then use some CSS for your pre tag to wrap the text...
pre {
white-space: pre-wrap; /* Since CSS 2.1 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Related
Take a long continuous string of text like so:
Question?Thisisanissuewithusingquestionmarks
In all versions of IE, the line breaks unexpectedly after the question mark. In IE9+ this is countered by using white-space: pre;, but IE8 seems to ignore it (even though it's supported). The only way I've been able to get this to wrap as normal (i.e. not line break at the question mark) is by using a mono-spaced font, but this also extends the length of the textarea. Any ideas?
To summarize: I want a HTML/CSS solution to having the line not break on to a new line after the ? mark in IE8.
Fiddle: https://jsfiddle.net/8m5yea9y/
Example of how it's working fine in IE9+ using white-space: pre;
Adding word-break: break-all; to your css for the textarea should cause the line to break as desired. You may also need to add word-wrap: break-word;.
Added Screenshot: Tested and works in IE8 on windows XP.
Is it valid to put lone carriage-return characters into a HTML block formatted with white-space: pre-wrap?
I've got an application which is receiving a SOAP message, and logging the message to a file. Our logging code has always stripped new-line characters so on Unix, this is a one-line log entry. The incoming message is windows format CRLF though, so after stripping the new-line, I'm left with lone carriage returns.
The log viewer screen on the application shows a table with the log entries having white-space: pre-wrap formatting. On my browser at least, this looks great, with lone carriage returns working just the same as a new-line or CRLF.
Is this reliable behaviour?
Yeah, it's valid. Using white-space: pre-wrap; is exactly the same as using <pre>, except that it will naturally wrap lines according to the boundaries of its parent.
However, you should consider making sure your CSS is cross-browser compliant.
#log {
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
You can also use white-space: pre; if you want line to push the boundaries of its parent to keep everything in the output on a single line
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
wordwrap a very long string
My code
<div style="width:40px;">adfdddddddddddddddddddd</div>
This code should make 4 lines but it is displaying the output in one line.
Try
<div style="width:40px;word-wrap:break-word;">adfdddddddddddddddddddd</div>;
For word wrap consider adding this class.
.wordwrap {
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera <7 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE */
}
See the reference here Is there a way to word-wrap long words in a div?
Your code is showing the output in one line because it's taking the content as a single word.
A single word will be shown in a single line. Try this code using some sentence then you will get the desired output.
You can try something like the following
<div style="width:40px;">This is a sentence.</div>
I'm developing an iPhone theme for my website, can you be able to break a long sentence something like this:
A long sentence would go past the iPhone screen and I need this to break
Into this:
A long sentence would go past the iPhone
screen and I need this to break
Showing like this:
http://uimgz.com/i/M8U5X5f2d1.png
if your text has spaces then adding a width for the wrap element will break the text automatically. But if you have a text without a space (such as a link) you can use break-word:
.your-selector {
word-wrap: break-word;
}
As per: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#Browser_compatibility
pre {
word-wrap: break-word; /* IE 5.5-7 */
white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
white-space: pre-wrap; /* current browsers */
}
word-wrap doesn't seem to work any more, use white-space instead
I think the problem is that the "viewport" is wider than the device's screen. See this post for some background and possible solution.
I'm using the <pre> tag to display preformatted text (including line breaks, spaces and tabs etc.) But large lines without line-breaks are shown in one line and a scroll bar is added.
I want to limit the width of the <pre> tag (such that large lines are broken up to come to new lines and no scroll is required. Is this possible or is there some other tag that I can use?
Code is something like:
$.post("contr.php", q1, function(data) {
$("#el_text").html("< pre>"+data+"< /pre>");
});
An exhaustive way of supporting it in almost all browsers:
pre {
white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
white-space: -pre-wrap; /* Opera */
white-space: -o-pre-wrap; /* Opera */
white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
word-wrap: break-word; /* IE 5.5+ */
}
I had the same problem not long ago and had found the solution here:
http://codingforums.com/showthread.php?t=43293
pre{
white-space:pre-wrap;
}
..does what you want in Firefox and Chrome - wraps the lines but preserves whitespace. But unfortunately IE doesn't seem to support it (although I haven't looked in IE8 yet).
Edit: IE8 supports it.
If space is being allocated to the right of the block even after doing what Karim said
Then maybe you have enclosed inside .
Table tag allocates space for the entire pre string even when the content may be word wrapped This leads to blank areas on right of pre block
In this case replace with some other tag, like div or paragraph