I am using wordpress theme , but there was not working pre tag , so i have created my pre tag , all is good but when break line not working.
pre {
word-break: break-all; /* webkit */
word-wrap: break-word;
white-space: pre;
white-space: -moz-pre-wrap; /* fennec */
white-space: pre-wrap;
white-space: pre\9; /* IE7+ */
}
try using this, might be it works.
I've created editable DIV here. Text is wrapping, just like I wanted. But, what I've noticed is that text is wrapping only if it is plain text. On the image below I've pasted some text with markup - and it doesn't wrap. Can I solve this, so text inside DIV will always wrap?
Code for editable DIV:
.editableDiv {
padding: 5px;
-webkit-user-modify: read-write;
-moz-user-modify: read-write;
user-modify: read-write;
word-wrap: break-word;
box-sizing: border-box;
background-color: #FAC28A;
color: #003399;
}
Why don't you try using word-wrap: break-word; on .spanDateEventHeader class. This would make sure it doesn't leave the Div.
You are obviously using pre element.
Quick solution is to use white-space property on pre element.
Add this to your css:
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+ */
}
How to mimic word-break: break-word; for IE9, IE11 and Firefox?
It seems to work in Chrome. I have learnt and understood that it is a is non-standard, webkit only.
FYI, I have tried using,
white-space: pre-wrap;
And some more like,
overflow-wrap: break-word;
Also tried the below mentioned CSS,
word-wrap: break-word;
word-break: break-word;
But these don't seem to work.
I can't provide fixed width to the span(which contains the text) by making it display: block; explicitly as the text is dynamic and will differ according to the user's Geo-location. Currently we support around 18 languages.
This is how the code looks,
The html,
<div id="grid2">
<span id="theSpan">Product Support</span>
</div>
The CSS,
#theSpan{
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 */
word-break: break-all;
}
#grid2{
width: 100px;
}
It looks like this,
I want it to be like,
Please note:
I had to use word-break: break-all; as for Some of the languages the translated text is too long and it overflows out of the grid. The text 'Product Support' is dynamic.
Update:
I have a fixed width for the div with id, grid2. In one of the languages the translated text is too long, it's a Single word and it flows out of the grid2 div.
Updated the code too.
I have had good success in Chrome, Firefox and IE with using only:
word-break: break-word;
word-wrap: break-word;
In my problem case I was already using:
display: table-cell;
and I ended up having to include
max-width: 440px;
to get wrapping in all browsers. In most cases the max-width was not necessary.
#grid2{
white-space: pre-wrap;
word-wrap: break-word;
}
This should work for IE11, but not for IE9
Use display:table-caption to achieve what you are looking for.
LIVE DEMO
The HTML:
<div id="grid2">
<span id="theSpan">Product Support</span>
</div>
The CSS:
#theSpan{
display:table-caption;
}
Hope this helps.
In a table where a width size 97% is given, and a long single word like,
<td style="word-wrap: break-word;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>
is added to a table cell where word wrap is set to break-word won't break the word. It goes past the set 97% width of the table.
Here is the JSFiddle of the problem, where two tables are created with the same styles but one table with a cell that has a single long word and the other with a paragraph with spaces.
http://jsfiddle.net/E5b52/
Does anybody know how to solve this?
EDIT - Note that a FIXED WIDTH cannot be given to the tabled cell.
Try this instead:
.table-cell {
display:table-cell;
word-break:break-all;
padding:5px;
}
http://jsfiddle.net/E5b52/4/
You should use word-break: break-all;
Check updated demo
Use the following CSS property:
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* css-3 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
word-break: break-all;
white-space: normal;
You should try this:
.table-cell {
display:table-cell;
padding:5px;
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* css-3 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
word-break: break-all;
white-space: normal;
}
Working Example
pre tags are super-useful for code blocks in HTML and for debugging output while writing scripts, but how do I make the text word-wrap instead of printing out one long line?
The answer, from this page in CSS:
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+ */
}
This works great to wrap text and maintain white-space within the pre-tag:
pre {
white-space: pre-wrap;
}
I've found that skipping the pre tag and using white-space: pre-wrap on a div is a better solution.
<div style="white-space: pre-wrap;">content</div>
Most succinctly, this forces content to wrap inside of a pre tag without breaking words.
pre {
white-space: pre-wrap;
word-break: keep-all
}
I combined #richelectron and #user1433454 answers.
It works very well and preserves the text formatting.
<pre style="white-space: pre-wrap; word-break: keep-all;">
</pre>
This is what I needed. It kept words from breaking but allowed for dynamic width in the pre area.
word-break: keep-all;
I suggest forget the pre and just put it in a textarea.
Your indenting will remain and your code wont get word-wrapped in the middle of a path or something.
Easier to select text range in a text area too if you want to copy to clipboard.
The following is a php excerpt so if your not in php then the way you pack the html special chars will vary.
<textarea style="font-family:monospace;" onfocus="copyClipboard(this);"><?=htmlspecialchars($codeBlock);?></textarea>
For info on how to copy text to the clipboard in js see: How do I copy to the clipboard in JavaScript? .
However...
I just inspected the stackoverflow code blocks and they wrap in a <code> tag wrapped in <pre> tag with css ...
code {
background-color: #EEEEEE;
font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
}
pre {
background-color: #EEEEEE;
font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
margin-bottom: 10px;
max-height: 600px;
overflow: auto;
padding: 5px;
width: auto;
}
Also the content of the stackoverflow code blocks is syntax highlighted using (I think) http://code.google.com/p/google-code-prettify/ .
Its a nice setup but Im just going with textareas for now.
You can either:
pre { white-space: normal; }
to maintain the monospace font but add word-wrap, or:
pre { overflow: auto; }
which will allow a fixed size with horizontal scrolling for long lines.
Use white-space: pre-wrap and vendor prefixes for automatic line breaking inside pres.
Do not use word-wrap: break-word because this just, of course, breaks a word in half which is probably something you do not want.
Try using
<pre style="white-space:normal;">.
Or better throw CSS.
This is what you need to wrap text inside pre tag:
pre {
white-space: pre-wrap; /* css-3 */
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+ */
}
The <pre>-Element stands for "pre-formatted-text" and is intended to keep the formatting of the text (or whatever) between its tags. Therefore it is actually not inteded to have automatic word-wrapping or line-breaks within the <pre>-Tag
Text in a element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.
source: w3schools.com, emphasises made by myself.
The Best Cross Browser Way worked for me to get line breaks and shows exact code or text: (chrome, internet explorer, Firefox)
CSS:
xmp{ white-space:pre-wrap; word-wrap:break-word; }
HTML:
<xmp> your text or code </xmp>
The following helped me:
pre {
white-space: normal;
word-wrap: break-word;
}
Thanks
in case your using prism or any code formatting library, then you will need to modify booth pre and code tags as follow:
pre {
overflow-x: auto !important;
white-space: pre-wrap !important; /* Since CSS 2.1 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap !important; /* Opera 4-6 */
white-space: -o-pre-wrap !important; /* Opera 7 */
word-wrap: break-word !important; /* Internet Explorer 5.5+ */
}
code{
white-space: normal !important;
}
<pre> does it's work, but for code there is <code> tag.