I've got a strange splitting bug in a website I am making. Everywhere on the website the text is split in the correct way. But in one block it isn't.
http://www.spanjevakantiewinkel.nl/
At the bottom: "aankomende evenementen". Bunol, the last words are under the words of the next block! But all CSS of these blocks is the same.
I have no idea how to solve this.
The text content of that paragraph has (probably \u00A0 in the original data) between the last words instead of normal spaces. Get rid of those and it will line break correctly.
Related
I have a div and a textarea exactly overlapped, I type in the textarea and that text is converted to spans that have varying text colors (syntax highlighting) and are then shown in the div, so it looks like you're typing in the div, but you're actually typing in the transparent textarea. At the moment I simply put a space between the spans where a space exists in the text input, but if I add more spaces in series it doesn't work (only one will show). So I tried using instead of spaces but I was surprised to find out the width of it is different from regular spaces. What is the point of then?
To the point, how can I add spaces that have the same width as regular spaces if doesn't?
And here's an example of what should be two exactly matching lines (but aren't).
<span>Hello</span> <span>World</span>
<span>Hello</span> <span>World</span>
Note: I'm using the font "FontinSmallCaps", it's possible that's the reason for the discrepancy, but I am not willing to do away with it. Would rather filter the user input to never have two consecutive spaces. Although that would be a last resort.
If anything is unclear or needs elaboration, let me know.
Thanks in advance!
Not exactly sure of your HTML structure, but whatever wraps the HTML you have shown could have white-space: pre set, then the spaces will all remain. No need to convert them.
<div style="white-space:pre"><span style="white-space: pre;">Hello</span> <span>World</span></div>
is Non-breaking space and the other is considered as normal string by browser. A non-breaking space means that the line should not be wrapped at that point, just like it wouldn’t be wrapped in the middle of a word. are also non-collapsing, that's probably the most significant aspect of their use (at least, that's how I tend to use them, pad stuff out, quick and easy)
I am having trouble finding an exact reference of the behavior of the HTML emsp entity. I have looked at W3.org, MDN, W3schools, and here, but I have not yet found a description that describes its breaking or wrapping behavior in HTML that does not have any special styling applied.
The code below shows an experiment I resorted to, but I am still a bit confused about when it will and will not wrap. Is there a good reference?
<!DOCTYPE html>
<html>
<style>
body {
font-size: 20px; font-family: Courier, fixed;
}
</style>
<body>
<p>Following is some text with some embedded emsp entities.<br>Here is one mid-word: sam ple. <br>And here is one on each side of a dash: lock - step.<br>Then, how about one after a period?<br>Right after the next period is one and then a normal space. How about the standard space and then the emsp?<br>That sequence follows this sample sentence. (Note that since the regular space came first, this can cause this text after it to become indented, whereas the emsp-then-regular space occurrence just before will never do that, I think.) As long as I'm looking at them after the end of a sentence, we should try putting just one emsp after a sentence instead of the regular space caracter.<br>I thought that would stick the two sentences together, but it does not do so here. Indeed, this is consistent with its behavior mid-word. Okay, how about multiple occurrences of it?<br>There are 3 in the brackets here: [ ] and so on. I played with that last one a bit and I cannot get it to break after the 3 emsps. Here, they seem to keep their width (they are not combined into one) and they are not breakable, not even either before the first or after the last one. So, I seem to only be able to get the "[" and never the "]" as the first character on a new line.<br>Okay, more extremely, trying brackets around 5 emsp chars, a word, and 5 more emsp chars: [ word ] .<br>There we seem able to break before "word", but still never before "]". What's going on there?
</p>
<p>From the examples above, I think the mystery around emsp characters is mostly resolved for me.</p>
<p>Consider the standard behavior for a regular space character. Here, first remember that multiple occurrences of regular whitespace characters are all compressed as if they were a single regular space character. Then, of course, the regular space character takes a certain width, and lines are never broken just before the regular space, only after it. And the space normally allocated for a regular space character does not need to be rendered at the right edge of a box.</p>
<p>Similarly, text can break after an emsp character, but will not do so before. It is wider than a regular space character, but mostly behaves like it. Where it differs is if you have multiple emsp entities right next to each other. In that case, no break will occur before, within, or after the group (unless there is whitespace before or after it, in which case the whitespace is the location of the break). But if a set of multiple emsp characters are placed directly between two non-white characters (as in the bracket example above) then they are not compressed and no breaking occurs. That's all I'm thinking of at the moment ...</p>
</body>
</html>
emsp is a white space having the same width as the letter "M"
I found a brief description at http://opencoder.net/emsp.html
Whether it is a breaking or a non-breaking space, I would say the easiest way to find out is to test it.
Why to use this in the code while coding?
Where to use this? why the code need this?
Referring to which context we should write this?
How to display text exactly in the center, with equal distance from all the sides?
This code is used to apply a space within your code, you may have noticed when writing HTML, if you leave a massive pile of spaces between two words, the browser ignores it, and therefore thats when
is needed.
If you want to center text, there is a number of ways you can do this, the best way is probably to use the CSS rule:
text-align: center;
See this for more info:
http://www.w3schools.com/cssref/pr_text_text-align.asp
is an HTML entity encoding a non-breaking space. If you separate two words with , web browsers will not split the words over two lines.
  is almost always a typo.
People frequently use with normal spaces to add extra horizontal whitespace.
There are other posts covering how to centre text vertically and horizontally - see https://stackoverflow.com/search?q=vertically+horizontally+centered+text for a range of answers.
is a html ascii character. It represents a space.
When you add multiple spaces after each other in html they will be truncated and only one will be displayed in the rendered page. when you use all spaces are rendered on the page.
When I try to create a navigation with inline-block, I get 4px to the right of each list item.
When I do it by floating each list item, it works fine.
Is there a reason the first option is applying that 4px? I have set EVERYTHING to have a margin of 0px and padding of 0px, I don't understand it. Even Firebug reports it as having 0, yet the gap is still there.
Thanks
Yes, space is by design and should be
Is there a reason for that? Yes it is. What got added is actually a word space. The same as if you'd have two lines of text. Browsers put a space between texts in separate lines so last words don't touch first words of the next line:
<p>
This is my text that's in two lines
inside my HTML source.
</p>
There would be a usual word space between lines and inside so text gets correctly displayed in browser:
This is my text that's in two lines inside my HTML source.
The same happens in your case, because your elements are inline. Your navigation elements are listed one per line in HTML source hence a word break gets added between them.
How to avoid excessive spaces between elements?
There are basically 3 approaches to mitigate this problem. All of them work on the premise to put all elements in the same line as seen by the HTML renderer:
Put all elements unspaced in a single line:
<ul>
<li>First</li><li>Second</li>...<li>Last</li>
</ul>
This one actually puts all elements in one line which may make it harder for people to manipulate these elements. If every LI would have an anchor tag inside (with a long link), this line gets too long to handle.
Comment-out line breaks:
<ul><!--
--><li>First</li><!--
--><li>Second</li><!--
...
--><li>Last</li><!--
--></ul>
Make tags break the line:
<ul
><li>First</li
><li>Second</li
...
><li>Last</li
></ul>
This one is least obtrusive to the eye but may seem confusing to beginners hence other team members (if you work in such environment) may feel tempted to put tag ends back to where they were originally (and usually are). They may feel these were broken by error.
The result of all three of them can be seen in this JSFiddle example.
Pick the one that suits you best. I usually use commenting because it's least distracting in my development editor because comments are very subtle.
Yes, so I got the problem that if you type a long sentence with no space e.g eeeeeeeeeeeeeeeeeeeeeeee, it will break itself, but then now I would need to start typing some ugly non-breaking coding.
Example:
http://jsfiddle.net/r3CFJ/
I need to have everything in one sentence in order not to make it break itself. Check here to see the result of not having everything in one sentence:
http://jsfiddle.net/r3CFJ/1/
How can I fix this please any solutions?? as my further coding will get very ugly and not readable?
You are getting this spacing because of the CSS, I am not sure why you add the pre type formatting and then wonder why it shows 'exactly' what you do (multiple lines, etc).
If you remove the CSS it looks just fine on 1 line.
Look: http://jsfiddle.net/r3CFJ/10/
Here's the problem, the white-space property in CSS forces new lines to break for all values except "normal" and "nobreak". There is no value for this property that will allow you to wrap lines while no breaking on new lines in the code. Don't like it? Get the W3C to add another value and get the major browsers to adopt the rule.
You don't want your entire div to be subject to a property set to such a value since you don't want new lines to break within the div. You do want elements inside your div to be subject to such a property. Wrap all the text in anchor element tags and apply the CSS to the elements that will require wrapping.
Here's a modification of your example working as expected. (Assuming no forced breaking due to line breaks in code but wrapping of long lines)
If you want the image and text will be inline set a or fancybox_vid to be position:absolute;
Example http://jsfiddle.net/huhu/r3CFJ/30/