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>
Related
This question already has answers here:
How to use automatic CSS hyphens with `word-break: break-all`?
(4 answers)
Closed 6 years ago.
How can I break real words by hypens:auto; and words that where not touch by that algorithms with word-break: break-all ?
In other words how to transform that:
Unabhaengigkeitserklaerungen
****************************
Into:
Unabhaengigke
itserklaerungen
**************
***************
(Or something very similar)
UPDATE:
OK. The main issue steam to be that my layout consist of two columns.
Left one will contain two tables one after the other. First table will contain some long string of "*".
This breaks algorithm for calculating widths, and table is NOT resizing as expected. Overflow-y will never be used as FF will NOT decrease width below length of that '*' word.
SOLUTION:
(Will update is as answer as soon as moderators remove "Duplicate" from this question)
Use:
table-layout: fixed for both tables.
Use % for every column widht
Use following CSS for word breaking:
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
/* Instead use this non-standard one: */
overflow-wrap: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
Use alternating spans with break or no-break set as required.
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+ */
}
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
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