When someone manually types in the text area the line breaks happen where I want them. However, if someone pastes a wall of text from somewhere else the linebreaks don't occur and the autoscroll kicks in leaving my lovely blog with a crappy horizontal scroll bar in the blog-subject field.
Blog here so you can see what I'm talking about (link to post entries at bottom of page if you want to try...).
Thanks in advance for your help
Just specify a width for .blog-content and then use word-wrap: normal;.
.blog-content {
font-family:monospace;
font-size:12px;
overflow:auto;
width: 100%;
word-wrap: normal;
}
The blog posts are currently wrapped in <pre> tags. The point of pre tags is that they preserve line breaks and white space. This is probably not what you want for this situation.
Change the pre tags to divs and your problem is solved.
Try adding white-space: normal;
.blog-content {
font-family: monospace;
font-size: 12px;
overflow: auto;
white-space: normal;
}
Related
Hi! When the window is resized, the text automatically wraps to fit its container nicely. For this, I'm using this CSS code:
article {
overflow: auto;
word-wrap: break-word;
}
Though it seems, that this has no effect at all. When I remove this piece of code, the behavior doesn't change: the text is still wrapped near the end of the line.
I'm complaining about the huge gaps between words. I've observed a few webpages where no extra code is used for this and it still works nicely. Can you please help me get rid of the space? Thank you!
I agree that the text-align: justify has been inherited from the parent html tags.
You could also try modifying the CSS as follows:
article {
overflow: auto;
word-wrap: break-word;
text-align: start;
}
As mentioned in the comments article seems to be inheriting text-align: justify;. Here's a way to fix the alignment:
http://jsfiddle.net/awesome/zs394/2/
article, .unjust {
/* regular */
text-align: left;
/* super strength */
text-align: left !important;
}
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 am working on a project and I need to display some XML on the web page. I am trying to colour code the XML using various span tags for the different xml parameters.
It is more a less working, but to keep the code tidy, I am putting each tag on a new line. This is kind of working as each each tag stays on the same line, which is what I want unless I put a <br /> tag but it puts a space in between each span tag.
For example, my XML is being shown as
< Application x : Class ="YourApp.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
and I want
<Application x:Class="YourApp.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Below is how I am trying to write the code in my HTML
<div class="codeBlock">
<span class="stringAndOperands"><</span>
<span class="xmltag">Application</span>
<span class="xmlParameter">x</span>
<span class="stringAndOperands">:</span>
<span class="xmlParameter">Class</span>
<span class="stringAndOperands">="YourApp.App"</span><br />
<span class="xmlParameter">xmlns</span><span class="stringAndOperands">="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span>
</div>
Below is my CSS
.xmltag
{
color: #a31515;
white-space: pre;
}
.stringAndOperands
{
color: #0034ff;
white-space: pre;
}
.xmlParameter
{
color: #ff0000;
white-space: pre;
}
.codeBlock
{
width: 1000px;
margin-left: auto;
margin-right: auto;
height: auto;
background-color: #cdcdcd;
font-family: courier new;
padding: 5px;
}
How can I remove the spaces when the span is on a different line. I know I can put each span on the same line would prevent this but this it makes my source code look a bit of a mess.
Thanks for any help you can provide.
You can't really, HTML automatically interprets line breaks as a single white space. You basically need them all on the same line in the markup for there to truly be no white space.
However you can use CSS to kind of hack your way around it. If you set font-size: 0px on the .codeBlock div and font-size: 12px or whatever on span the white spaces will not take up any space and it will fix your problem, assuming that you have no text inside .codeBlock that is NOT contained within a span element.
JSFiddle example
You may want to make sure you are using a reset to strip out any padding, margin etc.
span {margin: 0;padding: 0;border: 0;outline:0;vertical-align: baseline;}
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;
}
Why doesn't word wrap property work properly in the example below?
http://jsfiddle.net/k5VET/739/
What can I do to ensure that part of the word 'consectetur' fits in the first line itself? I want maximum number of characters to fit in each line.
The css is :
#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
font-weight: normal;
line-height: 18px;
width: 238px;
height:38px;
cursor: pointer;
word-wrap:break-word;
border:2px solid; }
If word-wrap: break-all don't work, try also add this:
white-space:normal;
work for me with the .btn class in Bootstrap 3
Use word-break: break-all;
#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
font-weight: normal;
line-height: 18px;
width: 238px;
height:38px;
cursor: pointer;
word-break: break-all;
border:2px solid; }
LIVE DEMO
Okay so I know this is an old question but I seriously think there could be some useful clarification of when to use which property. Looking at the existing answers, I feel they offer solutions without explanation so here is my attempt to help with that. For context, by default, the container will not try to break a single long word up because it wants to preserve the word in it's original form.
With that said, 3 main ways to break up words there is overflow-wrap, word-break, and hypens. I won't dive too deep into hypens though.
So first off. I see word-wrap is being used in the question but reading the documentation, that is deprecated and some browsers have decided to simply alias it to overflow-wrap. It's probably preferred not to use that.
The distinction between the two properties is pretty clear in the documentation but for clarity, overflow-wrap really only has two possible values and will detect if a word has been overflowed. If it does, by default it moves the entire word to the next line. If break-word is set, it will only break up the word if the entire word couldn't be placed on that line.
#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
font-weight: normal;
line-height: 18px;
width: 238px;
height:38px;
cursor: pointer;
overflow-wrap: break-word;
border:2px solid; }
#sp { }
<div id="fos">
<span id="sp">The longest word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span>
</div>
You can see the pneumonoul... long word breaks exactly where it needs to on the next line after it attempts to separate the long word.
Now in contrast, we have word-break. This has more granular properties and actually also has a break-word option. This is synonymous to the above snippet so when to use one or the other I think is pretty trivial.
However, word-break also offers a break-all value which will break the word whenever possible to fit word where it was originally intended. It doesn't try to figure out if it needs the word to be on a new line or not -- it simply shoves the line break where it overflows. The biggest distinction here from the above is that long word we use is now still on the top.
#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
font-weight: normal;
line-height: 18px;
width: 238px;
height:38px;
cursor: pointer;
word-break: break-all;
border:2px solid; }
#sp { }
<div id="fos">
<span id="sp">The longest word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span>
</div>
And then finally for hyphens have their own special way of breaking up words. For more info take a look at the documentation. Also worth noting that different languages have different ways of breaking up words but fortunately the hyphens property hooks into the lang attribute and understands what to do.
Another option people have suggested is using the white-space property which attempts to break up text through spaces. In the example I used, this doesn't help our situation because the word itself is longer than the container. I think the important thing to note about this CSS property is that this doesn't attempt to break up words within themselves and rather tries to do it via spaces whenever appropriate.
#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
font-weight: normal;
line-height: 18px;
width: 238px;
height:38px;
cursor: pointer;
white-space: normal;
border:2px solid; }
#sp { }
<div id="fos">
<span id="sp">The longest word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span>
</div>
Hope this helps.
This is useful for wrapping text in one line:
#fos {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
It does not wrap properly, because browsers do not apply automatic hyphenation (which would be the way to cause proper wrapping) by default. You need to use CSS hyphenation or JavaScipt-based hyphenation. The setting word-wrap:break-word, as well as word-break: break-all, by definition breaks words (splits th em to piece s at arbit rary poin ts), instead of proper wrapping.
Because the css word-wrap doesn't work in all browsers, use JavaScript instead! It should give the same result.
The function below requires JQuery and it will run each time window re-size.
The function checks if the element has more width then its parent, and if it has, it breaks all instead of words only. We don't want the children to grow bigger than it's parents, right?
I only needed it for tables, so if you want it in some other element, just change "table" to "#yourId" or ".yourClass". Make sure there is a parent-div or change "div" to "body" or something?
If it will go to else, it changes to word-break and then check if it should change back, that's why there is so much code.. :'/
$(window).on('resize',function() {
$('table').each(function(){
if($(this).width() > $(this).parent('div').width()){
$(this).css('word-break', 'break-all');
}
else{
$(this).css('word-break', 'break-word');
if($(this).width() > $(this).parent('div').width()){
$(this).css('word-break', 'break-all');
}
}
});
}).trigger('resize');
I hope it works for you!
To break only long words I used word-break: break-word;.
It seems to be deprecated for some reason, but it is the only thing that worked for me.
What I need is to break only the words that where too long and needed to be broke.