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.
This question already has answers here:
How to force a line break in a long word in a DIV?
(18 answers)
Closed 7 years ago.
If text is one line and too long and whitout any white space makes the div scroll horizontally but i want it to be shown in two or more lines is there any css tricks to make it so?
Keep in mind that you make it compatible for al browsers
.wrapword{
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -webkit-pre-wrap; /*Chrome & Safari */
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 can use the word-wrap, overflow-wrap and word-break CSS properties:
.dont-break-out {
/* 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 */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;
/* Optional: Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
Source: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
Short version:
.dont-break-out {
word-wrap: break-word;
}
Source: http://www.w3schools.com/cssref/css3_pr_word-wrap.asp
use this class for that div
.wrap {
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 */
}
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.