Browser is replacing Multiple space between words to the single space in html page. for e.g if my text is 'AB-DC 3' in Browser its showing 'AB-DC 3'. Inspect window its showing 2 spaces 'AB-DC 3'.
you can also try out yourself. just inspect element and add multiple spaces in word of any line check.
is there any solution for this??
Similar question answered cause, but not explaining how to resolve this.
Whitespace is non-significant by default, and is compacted down to a single space when rendered.
CSS can change that: white-space: pre-wrap will provide the default line-wrapping functionality that you would expect, plus the significant-whitespace behaviour of preformatted text. Best of both worlds!
<pre>AB BA</pre>
pre tag will also solve your problem
On the Op scenario:
Use white-space:pre; (no wrap except at <br>) or white-space:pre-wrap; (wrap when needed).
Example:
body{
margin: 0;
}
div {
width: 200px;
height: 100px;
}
#a {
white-space:pre;
background: gold;
}
#b {
white-space:pre-wrap;
background: skyblue;
}
<div id=a>This is some Text writen on here as example.<br> Here's a second sentence after the line-break .</div>
<div id=b>This is some Text writen on here as example.<br> Here's a second sentence after the line-break .</div>
Single White spaces:
Sometimes you need to use single spaces, like at the start of a sentence (when it is ignored). In situations like this, the best choice is to use instead.
Example:
p:nth-of-type(1) {
font-size: 2em;
background: tomato;
}
p:nth-of-type(2) {
font-size: 2em;
background: greenyellow;
}
<p> content</p>
<p> content</p>
To avoid changing your style of display.
Better to use style:
<style>
{ white-space: pre;}
</style>
If you give so many spaces in html it is of no use because browser will consider only one you have to use space entity the no. of times you type this entity browser will so that much spaces
HTML:
<p>He llo</p>
It will show exact 4 spaces in the work
Here is the fiddle link https://jsfiddle.net/yudi/zrqrfw98/
Related
I have a <h1> title with a long word, such as the following. The browser width depends on the device of course, but I've noticed that on one of my devices, it looks like this:
which is not a very nice word-breaking.
How to ask the browser to do "nicer" breakings instead?
Example: Internationali-sation or -tion or -on but not n alone in the next line.
Here is how to reproduce the problem (I've hardcoded 260px here just to reproduce what I've seen on my device, but this is not really hardcoded in my code):
.a { width: 260px; background-color: yellow; }
h1 { word-wrap: break-word; }
<div class="a">
<h1>Internationalisation</h1>
</div>
You can manually insert soft hyphen which is visible only on break. It suggests a place where the browser might break that word. Its something like <wbr> but with hyphen. Something like this:
h1 { word-wrap: break-word; }
.small { width:260px; }
<h1 class="small">Internationalisation</h1>
<h1>Internationalisation</h1>
There are a lot of problems with automatic word breaking which usually depends on browser dictionary (hyhphens can be used) or external scripts. You can also read more about it in another questions like Is it possible to enable auto-hyphenation in HTML/CSS?.
The <wbr> tag exists for this purpose.
The HTML <wbr> element represents a word break opportunity—a
position within text where the browser may optionally break a line,
though its line-breaking rules would not otherwise create a break at
that location.
.a { width: 260px; background-color: yellow; }
h1 { word-wrap: break-word; }
<div class="a">
<h1>Internationali<wbr>sation</h1>
</div>
Alternatively you can also add a zero-width space to the word, though that might cause odd behavior when trying to copy the string. (We get some questions here on Stack Overflow where code doesn't work because it contains a hidden zero-width space.)
Well you could prevent breaking altogether...
.a { width: 260px; background-color: yellow; }
h1 { white-space: nowrap; }
<div class="a">
<h1>Internationalisation</h1>
</div>
Or. set spans inside your content to denote where breaking should occur. This is a big ass word, not two separate words so the browser is clueless unless you educate it
.a { width: 260px; background-color: yellow; }
h1 { word-wrap: break-word; }
h1 span { display: inline-block; }
<div class="a">
<h1>International<span>isation</span></h1>
</div>
I have a site powered by Wordpress, and on one of my posts I have the following text.
Any readers interested in the different ways to interpret utils are encouraged to read about the difference between Ordinal and Cardinal Utility.
If Wordpress can't put all of the text "Ordinal and Cardinal Utility" on the same line as "between" it puts it all on a completely new line, which can look really clunky, especially on mobile. Because it's a hyperlink it's prioritising keeping it as one item whereas I'm happy for the words to be split over multiple lines, just as it would if it wasn't a hyperlink. I know this is a basic problem but for some reason I haven't found any solutions online. Is there an easy way to fix this?
The CSS property you're looking for is either white-space: nowrap or display: inline-block, depending on the look/style/effect that you're going for. By default, the <a> anchor element is an inline display, which allows the text to wrap.
Here are a few examples:
div {
width: 200px;
background: #e4e6e9;
padding: 10px;
margin: 10px;
}
a {
background: #0094ee;
color: #fff;
text-decoration: none;
}
.ib {
display: inline-block;
}
.ws-nw {
white-space: nowrap;
}
<div id="a">
Usually, links are "inline" which means they wrap around once they hit the side of the container.
</div>
<div id="b">
You can have them set to inline-block to prevent broken wrapping, but the text still wraps. inside the block
</div>
<div id="c">
You can avoid any wrapping at all by setting it to white-space: nowrap;. Be careful on super long text though because it can cause unexpected results on small containers.
</div>
I have a html code where I want to store long paragrapsh of information. The only issue is that in my code I don't want hundreds of sentences on just one line. Id rather see it formatted like:
<div id ="sidebar">
<div><b> Things to take into account: </b></div>
<div>
<p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</p>
</div>
</div>
However, when I do it this way and run my website the words run outside the container they are in
Can you help give me a way to display it this way in the code while keeping the words inside it's container?
my css:
#sidebar {
"background-color: #eee;
height: 200px;
width:350px;
float:left;
margin-top: 30px;
margin-left: 30px;
border: 1px solid black;
border-radius: 5px;
display: block;
}
UPDATE: changed X to words and fixed it. Weird but ok lol
Your issue is that xxxxxxxxxxxxxx is considered one word and by default the browser won't break this word.
adding
word-wrap:break-word;
Will fix this, but I would guess once you use actual text in there it will break more naturally since it won't be a single word of so many characters.
fiddle: http://jsfiddle.net/ktbypbtt/
Here is another fiddle without the word-wrap, but with actual text.
http://jsfiddle.net/ktbypbtt/1/
Notice how it breaks itself since the browser will naturally wrap the word after each word if it hits the end of the div, but needs to be specifically told to break words.
Just add a <br> tag where ever you want the text to go to the next line
<div id ="sidebar">
<div><b> Things to take into ACCOUNT: </b></div>
<div>
<p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
</p>
</div>
</div>
Helpful? Let me know :)
add some css.
#sidebar{
display: block;
}
or add a class to your wrapping div and do the same thing with setting display as block
edited
You could cut off the overflow:
#sidebar{
overflow: hidden;
}
http://jsfiddle.net/5deyo1tb/
These are codes:
<div>Hello World. http://www.newyorker.com/arts/events/2014/02/03/140203gofr_GOAT_front.</div>
div {
background: red;
width: 200px;
height:200px;
}
http://jsfiddle.net/gEDx9
This long link is displayed at 2nd line. I hope long this link can be displayed in multiple lines. I also hope this long link won't be displayed at outside of red div element. This long link should be fully displayed.
So this long link should be displayed at 1st line, 2nd line and 3rd line. May it will also be displayed at 4th line.
How can this be done via CSS?
There is a CSS Property called "word-break" which you may find useful:
div {
background: red;
width: 200px;
height: 200px;
word-break: break-all;
}
Reference: W3Schools word-break information
Just add the word-wrap-attribute this way:
div {
background: red;
width: 200px;
height:200px;
word-wrap: break-word;
}
See updated fiddle: http://jsfiddle.net/qhzKF/
If you really need to include a URL in page content, insert zero-width spaces at permissible break points. You can use the reference for them, e.g.
http://www.newyorker.com/arts/events/2014/02/03/140203gofr_GOAT_front
The details depend on the conventions on line breaks in URLs. The above example complies to the rules of The Chicago Manual of Style. There are other styles, too, but no reasonable style allows arbitrary breaking of URLs (which is what you would get by using word-wrap: break-word).
The proper handling of URLs in content is thus somewhat tricky, but it can be automated. However, it is best avoided by not using URLs in content unless the page content is about URLs. Normally, you should use links with descriptive link texts, “hiding” URLs into href attributes.
apply this css to your A element
a { word-wrap:break-word; }
You can use the word-wrap:break-word
CSS:
div {
background: red;
width: 200px;
height:200px;
word-wrap:break-word;
}
http://jsfiddle.net/gEDx9/3/
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;
}