I've overridden a CSS property of at my HTML page however IE9 can not display it well. When I debug the CSS I get that:
as you see white-space is overriden. However it does not work as intended. When I explicitly uncheck the white-space property of jqGrid as follows:
it works as intended. Any ideas?
PS: The code I've used:
<style type="text/css">
.ui-jqgrid tr.jqgrow td {
word-wrap: break-word; /* IE 5.5+ and CSS3 */
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 */
overflow: hidden;
height: auto;
vertical-align: middle;
padding-top: 3px;
padding-bottom: 3px;
}
</style>
Related
I'm not sure where the problem is coming from but my h1 and h2 takes are splitting the word rather than breaking word-breaking.
Here is a link to the site I'm working on https://helium.marketing
I've tried manually adding a snippet after a bunch of Googling but nothing seems to work. Here's the snippet.
p, h1, h2, h3, h4, h5 {
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 problem turned out to be the white-space: pre-wrap; needed to be white-space: normal; and overflow: visible;
It didn't fix it when I injected the code in Chrome but on a browser refresh, it resolved the issue. Thanks everyone!
The property you're looking for is not word-wrap, it's word-break
Check out the snippet example.
Hope this helps
h1, p {
width: 100px;
word-break: break-word;
}
<h1>Hello World</h1>
<p>Last night, I had the best steak ever in the nearby town restaurant</p>
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+ */
}
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 */
}
I have a string in a div: Test: AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
Using a the word_wrap CSS class found on Stack Overflow,
/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.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 */
}
it appears like this:
Test:
AAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAA
How can I wrap it so Test: and the A's are on the same line?
Use a instead of a regular space:
Test: AAAAAAAAAAAAAAAAAAAA
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