I am having issues with wrapping text. I am generating some hexencoding encryption and the output is too long like:
827938828ey823876te37257e5t328er6367r5erd663275e65r532r6s3624e5645376er563rdr753624e544341763r567r4e56r326r5632r65sr32dr32udr56r634r57rd63725
and it continues. When I put it inside a div, it won't wrap it even if I assign a specific width, because they are all together. I want it to continue from the next line if the div is not wide enough for one line.
How can I do that?
You can't wrap that text as it's unbroken without any spaces. You need a JavaScript or server side solution which splits the string after a few characters.
EDIT
You need to add this property in CSS.
word-wrap: break-word;
I have found something strange here about word-wrap only works with width property of CSS properly.
#ONLYwidth {
width: 200px;
}
#wordwrapWITHOUTWidth {
word-wrap: break-word;
}
#wordwrapWITHWidth {
width: 200px;
word-wrap: break-word;
}
<b>This is the example of word-wrap only using width property</b>
<p id="ONLYwidth">827938828ey823876te37257e5t328er6367r5erd663275e65r532r6s3624e5645376er563rdr753624e544341763r567r4e56r326r5632r65sr32dr32udr56r634r57rd63725</p>
<br/>
<b>This is the example of word-wrap without width property</b>
<p id="wordwrapWITHOUTWidth">827938828ey823876te37257e5t328er6367r5erd663275e65r532r6s3624e5645376er563rdr753624e544341763r567r4e56r326r5632r65sr32dr32udr56r634r57rd63725</p>
<br/>
<b>This is the example of word-wrap with width property</b>
<p id="wordwrapWITHWidth">827938828ey823876te37257e5t328er6367r5erd663275e65r532r6s3624e5645376er563rdr753624e544341763r567r4e56r326r5632r65sr32dr32udr56r634r57rd63725</p>
Here is a working demo that I have prepared about it. http://jsfiddle.net/Hss5g/2/
white-space: pre-wrap
is what worked for me for <span> and <div>.
You can use the following
p{word-break: break-all;}
<p>LoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolor</p>
Related
I'm attempting to wrap this long <pre> so that it forms a rectangle (rather than having the "jagged" endings I'm getting). I've set white-space to pre-wrap and word-break to break-all like other StackOverflow posts have suggested, but it seems like the browser is still applying some heuristics on where to break the line.
I cannot break the <pre> into rows a-priori because both the length of the content, as well as the width of the <pre> may be dynamic.
pre {
width: 300px;
white-space: pre-wrap;
word-break: break-all;
}
<pre>ER..............................3......|..f1.f1.fSfQ.W....R..|.........K...R.A..U1.0....r...U.u....t.f.....B....1.ZQ....[...#P..?Q..SRP..|...f....D.....f#.....f.>#|..xpu....{.D|.....isolinux.bin missing or corrupt...f`f1.f...{f...{fRfP.Sj.j...f.6.{.........6.{....A......{...d.fa....Operating system load error...^....>b.....<.u........................</pre>
What I have:
What I want to achieve:
line-break: anywhere; works well in Chrome (Canary) and Firefox, but not Edge. If the content contains spaces, you should probably use white-space:break-spaces rather than pre-wrap as well.
pre {
width: 300px;
white-space: break-spaces;
line-break: anywhere;
}
<pre>ER..............................3......|..f1.f1.fSfQ.W....R..|.........K...R.A..U1.0....r...U.u....t.f.....B....1.ZQ....[...#P..?Q..SRP..|...f....D.....f#.....f.>#|..xpu....{.D|.....isolinux.bin missing or corrupt...f`f1.f...{f...{fRfP.Sj.j...f.6.{.........6.{....A......{...d.fa....Operating system load error...^....>b.....<.u........................</pre>
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 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
I have a paragraph with alot of text inside but this text is showing all in one line. How can I format this text so it will not mess up my site and not show it in a single line?
Thanks in advance for your help!
Edit:
This is my code:
<div class="catDescription">
<?php echo $this->category->description; ?>
</div>
You can check here what my issue is:
http://complusoft.net/demo-ventus/index.php?option=com_k2&view=itemlist&layout=category&task=category&id=29&Itemid=334
This is because you have only 1 word.
Add word-wrap: break-word;
Like
.catDescription p {
width: 300px;
white-space: normal;
word-wrap: break-word;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap
If you set a width for the paragraph then the text should wrap by default, unless specified otherwise, when the width of the paragraph is exceeded.
p {
width: 300px;
white-space: normal;
}
You have a non spaced string, inorder to break that, you will have to assign some fixed width to your paragraph and than use word-wrap property with a value of break-word
Demo
There are different ways to achieve this.
You could use some <br> tags, but looking at your code, I don't think it could be useful.
That's why I'm suggesting you to format your text better. You could style your <div> and your <p> to get a good-looking text. First of all, set a max-width to your div: this way, if a user shrinks the window, or has a very low resolution, your layout is preserved.
.catDescription {
max-width: 1024px; /*Width example, you can ofc change it*/
}
If you have walls of text, line-height property can help you not getting your text too tightened. For example:
.catDescription p {
line-height:130%;
}
Use line breaks: <br>. Insert wherever you want a newline to occur.
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;
}