I have a link in a navigation menu that doesn't wrap properly on IE10.
When there is a conditional plural using brackets, IE10 cut off the word into 2 separated lines. I am expecting the whole word "link(s)" to go to the next line if there is not enough space, like Chrome is doing.
It's supposed to look like this:
Hello worldddd
link(s)
I tried to use the different word-wrap and word-break attribute but it doesn't fix it. If I use white-space: nowrap, the word doesn't go to the next line. I don't want to force the word to go to the next line for all browsers.
Do you know what I can do to fix this IE issue?
Let's say you have a text like this:
<p>this is a longer <span class="nowrap">test(s)</span></p>
Then all you need to do is apply following CSS:
p {
word-break: break-word;
}
#media all and (-ms-high-contrast:none)
{
/*target IE10*/
.nowrap {
white-space: pre;
}
/*target IE11*/
*::-ms-backdrop, .nowrap {
white-space: pre;
}
}
working jsfiddle - you can resize HTML input area to see the difference
Related
Recently I have been having a few issues with using a content editable div as a text box for a project I have been working on. The project is built with Angular2 on the front-end.
The issue I have been having is when I go to tab/space all the way to the end of the content editable div, rather than moving to the next line, it instead keeps adding tabs that appear to accumulate in the text content of the div. By that I mean, if I hit the tab/space key 4 times once it reaches the end, I will then have to backspace 4 times to clear them out.
<div class="text-box" contenteditable="true"></div>
body
{
background-color: black;
}
.text-box
{
background-color: white;
color: black;
height: 200px;
width: 200px;
margin: auto;
white-space: pre-wrap;
}
https://codepen.io/anon/pen/YxYNYW
The code pen I included demonstrates the issue. If you just click inside the box and then hold space bar, once the cursor gets to the end, it will not move to a newline. I realize it has something to do with the white-space: pre-wrap property I use with the content editable div. Is there anyway to get this to work while still being able to use that property?
I would like to keep the pre-wrap property because it preserves all the white-space that is brought in from objects with text in the database. I tried it with the pre-line property over pre-wrap but that caused the text to jump when clicking into the editable div. I also tried using word-break: break-all which seemed to work but then the text gets a little messed up.
Also on a side note, has anyone ever experienced an issue where they were unable to click between characters once the text was highlighted? This is kind of a weird issue to describe, and a tough one to track down apparently. What happens is I will type some text into the div, highlight it with my cursor, and then if I try to deselect the text by clicking in between characters, it will not work. I will have to click a line that is currently not highlighted or outside of the element entirely to deselect any highlighted text.
I originally thought maybe it was a content editable issue, but it seems to be working fine in the code pen I linked, so now I am not sure what it is.
Thanks in advance for the help!
You have to use word-break for solving your issue.Modify your css like following
body
{
background-color: black;
}
.text-box
{
background-color: white;
color: black;
height: 200px;
width:150px;
margin: auto;
white-space: pre-wrap;
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-word;
white-space: normal;
}
This solves your problem.Here is the working pen pen
Please reffer this ans for more info
I have a text with one large word and it's broke the phone view.
Please see the picture attached.
picture here
apply the word-wrap CSS property on your content
* { word-wrap: break-word }
you'll better off if you are a bit more specific with your selector instead of '*' like:
p { word-wrap: break-word }
this will allow the long word(s) to be broken and wrapped onto the next line.
You can use this, just apply the CSS to the text container.
.word-wrap {
word-wrap: break-word; /* IE 5.5-7 */
white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
white-space: pre-wrap; /* current browsers */
}
I have a piece of HTML content such as:
<span class="wrappable"><i>(03/10/2016) Author Name</i> LongContentWithoutLineBreakLongContentWithoutLineBreakLongContentWithoutLineBreakLongContentWithoutLineBreakLongContentWithoutLineBreakLongContentWithoutLineBreakLongContentWithoutLineBreakLongContentWithoutLineBreakLongContentWithoutLineBreakLongContentWithoutLineBreakLongContentWithoutLineBreakLongContentWithoutLineBreakLongContentWithoutLineBreak</span>
The "wrappable" css class is defined as:
.wrappable
{
overflow-wrap: break-word !important;
word-wrap: break-word !important;
white-space: normal !important;
display: inline !important;
}
Please refer to https://jsfiddle.net/dn9tt26e/ run the fiddle.
At least in Firefox version 45.0.1, this produces an output that breaks on the first line without the line filling the width of its container. For pure text content, there is no such issue, but as soon as I add an embedded HTML element, seems the issue appears.
How do I ensure all lines (excepts perhaps the last) fill the full width of the container without breaking prematurely?
Some pictures of what I see in my browser:
Suggested solution using break-word:all https://jsfiddle.net/4bu8ctt4/ in Firefox:
Local page on my machine in Firefox:
Local page in IE 11 (this one does not wrap the second line at all)
You have basically 2 words combined with break-word, which means it'll put any long word in new line. Try with word-break: break-all;
https://jsfiddle.net/4bu8ctt4/
Im sorry if i misunderstood you, but maybe this helps?
add property to your class
word-wrap: break-word;
like this
.wrappable
{
overflow-wrap: break-word !important;
word-wrap: break-word !important;
white-space: normal !important;
display: inline !important;
word-wrap: break-word;
}
source:
http://www.w3schools.com/cssref/css3_pr_word-wrap.asp
I simply want to show terminal output on a Webpage. Atm I'm using a pre tag to do that with pre { white-space: pre-wrap; } as you can see upon http://irc.dabase.com/.
My problem is that when I rotate my iPhone6 IOS device, it often doesn't reformat properly. Why is this? Can you offer some good CSS rules to make this use case of showing terminal output on a Webpage better?
pre {
white-space: pre-wrap;
word-wrap: break-word;
text-align: justify;
}
Here are the rules you need explained step by step:
Select all pre elements (set this to pre#yourID or pre.yourClass to select a specific pre)
pre {
Allow pre to wrap at word breaks and line breaks. Unlike pre-line, pre-wrap will not modify your terminal output at all. pre-line will modify your terminal output by condensing whitespace into one whitespace which could make finding exact phrases difficult or mess with whitespace column formatting! See here
white-space: pre-wrap;
Make sure that words that go past the end of the element break off instead of being hidden (like links for examples)
word-wrap: break-word;
This part is optional Justify the text so that it fully fills the line. Spaces become wider but their number is not increased.
text-align: justify;
}
Optionally, this rule can be fit into a media-query so that it only applies in the mobile version. But I believe there is no harm in applying this rule to all screen sizes by simply omitting a media-query.
In the event that the wider version of your iphone makes your pre rule stop working, you should check to see if there isn't already a media-query in place that is applying a rule to the pre when the screen reaches a certain size.
You can also try intentionally creating a media-query for the wider version, which may re-initialize the styles if there is some kind of bug going on.
For example:
Include rule that applies to smallest possible version
Rule A:
pre {
white-space: pre-wrap;
word-wrap: break-word;
text-align: justify;
}
Then in addition to rule A include another rule to re-initialize styles at landscape orientation
Rule B:
#media all and (orientation:landscape)
pre {
white-space: pre-wrap;
word-wrap: break-word;
text-align: justify;
}
}
You can try this to achieve -
pre {
white-space: pre-line;
word-wrap: break-word;
}
pre {
white-space: pre-line;
word-wrap: break-word;
text-align: justify;
}
You Can Try It Once
This worked nicely for me when I had pre tag inside of a table and code below made pre tag stay responsive to the table column width. Credits to: https://techstacker.com/responsive-pre-tags-css/
pre {
white-space: pre-wrap;
word-break: break-all;
}
I have two floated divs, side by side, with p tags inside. The text within the p tags does not wrap and just overflows the container, as you can see in the text under the images:
My HTML looks like so:
<div class="submenu">
<h3>Destinations in Europe</h3>
<ul>
<li>dfgdgdgfgdg</li>
<li>dfgdgdgfgdg</li>
<li>dfgdgdgfgdg</li>
<li>dfgdgdgfgdg</li>
</ul>
<h3>Features</h3>
<div>
<img src="/assets/images/o/menu/city-feat-one.jpg" />
<h4>blahblah</h4>
<p>
khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhljhiououhljhiououhljhiououhljhiououhljhiououhl
</p>
</div>
<div>
<img src="/assets/images/o/menu/city-feat-two.jpg" />
<h4>blahblah</h4>
<p>
khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhl
</p>
</div>
</div>
My CSS:
#rb-menu-com li .submenu > div {
width:48%;
float:left;
position: relative;
}
#rb-menu-com li .submenu div p {
color:#fff;
margin: 0;
padding:0;
width:100%;
position: relative;
}
#rb-menu-com li .submenu div img {
border:1px solid #fff;
}
Has anyone experienced this before? I haven't!! Driving me mad!
Give this style to the <p> tag.
p {
word-break: break-all;
white-space: normal;
}
Word wrapping only occurs when there is a word break.
If you have a "word" that is as long as that, then there is no place for it to break.
The proper solution is to write real content and not nonsense strings of characters. If you are using user generated content, then add a check for exceptionally long words and disallow them (or cut out part of them for URLs while keeping the whole thing in a link).
Alternatively, you can use the word-break CSS property to tell the browser to line break in the middle of words.
p { word-break: break-all }
(Note browser support).
Alternatively, you can use overflow to truncate the text if it won't fit in the container.
To anyone still struggling, be sure to check and see if you've set a line-height value on the font in question: it could be overriding the word wrap.
That is because you have continuous text, means single long word without space. To break it add word-break: break-all;
.submenu div p {
color:#fff;
margin: 0;
padding:0;
width:100%;
position: relative;
word-break: break-all;
background:red;
}
DEMO
This is not an answer to the question but as I found this page while looking to an answer to a problem that I had, I want to mention the solution that I found as it cost me a lot of time. In the hope this will be useful to others:
The problem was that text in a <p> tag would not fold in the div. Eventually, I opened the inspector and noticed a 'no breaking space entity' between all the words. My editor, vi, was just showing normal blank spaces (some invisible chr, I don't know what) but I had copied pasted the text from a PDF document. The solution was to copy a blank space from within vi and replace it with a blank space. ie.
:%s/ / /g where the blank to be replaced was copied from the offending text. Problem solved.
This is a little late for this question but others might benefit.
I had a similar problem but had an added requirement for the text to correctly wrap in all device sizes. So in my case this worked. Need to setup the view port.
.p
{
white-space: normal;
overflow-wrap: break-word;
width: 96vw;
}
You can use word-wrap to break words or a continuous string of characters if it doesn't fit on a line in a container.
word-wrap: break-word;
this will keep breaking lines at appropriate break points unless a single string of characters doesn't fit on a line, in that case it will break.
JSFiddle
The solutions is in fact
p{
white-space:normal;
}
You can change the break behaviors by modifying, word-break property
p{
word-break: break-all; // will break at end of line
}
break-all: Will break the string at the very end, breaking at the last word
word-break: is more of pretty brake, will break nicely for example at ? point
normal: same as word-break
If the desired result is to break the line by complete word use:
p { word-break: break-word; }
else you can use:
p { word-break: break-all; }
EASY
p{
word-wrap: break-word;
}
Adding width: 100%; to the offending p element solved the problem for me. I don't know why it works.
For others that find themselves here, the css I was looking for was
overflow-wrap: break-word;
Which will only break a word if it needs to (the length of the single word is greater than the width of the p), unlike word-break: break-all which can break the last word of every line.
overflow-wrap demo
add float: left property to the image.
#rb-menu-com li .submenu div img {
border:1px solid #fff;
float:left;
}