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)
Related
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.
I am using an html template to send emails programatically. I know nothing about html, but I've just learned that it will collapse consecutive white space characters, which ruins my formatting(I am emailing a table of numbers). How can I solve this problem?
Just use <pre> tag like so:
<pre>
This is some text with some extra spacing and a
few newlines
thrown in
for good
measure
</pre>
Working Example: jsFiddle
and a Good reference on pre tag.
If you don't want consecutive spaces to collapse. Just set CSS property white-space.
e.g.:
white-space: pre;
<span style="white-space:pre;"> </span>
Check this link for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
Well, you can use the metacharacter to produce a "non-breaking space." (I used one in-between these two sentences. But I didn't use one here. Notice how the spacing between these sentences is slightly different, and how the last space is twice as wide because I used two tags?)
Fundamentally, I suggest that you should be using <table> tags within your e-mail body, thus identifying the data as "tabular" and giving you a rich array of options (styles, etc ...) for formatting it. It will look much better than anything you could do by means of "ASCII Art ..."
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.
I'm trying to limit the number of characters in a paragraph to a specific number. If the text is less than this then I want to pad it with whitespace and if it's longer then I will truncate is with an ellipsis. I want all containers that contain paragraphs to be the same size.
I'm using a responsive grid and so my container will resize dynamically to the length of the paragraph. I've tried added pre-wrap to the p element but my divs won't resize. It seems to be still ignoring the added whitespace.
p
{
white-space:pre-wrap;
}
Here is a JSFiddle showing my situation: http://jsfiddle.net/RFBza/4/
Omg. But in case you for some reason wish to do it exactly so, try adding a bunch of codes divided by spaces. So, where you added five spaces, now add .
But of course that is still terrible idea.
white-space is not meant to "lengthen" any divs or add padding to fill in space. It is merely meant to determine how the wording wraps in the containing div. If you wanted that text to overflow the div, for example, you could with white-space
http://www.w3schools.com/cssref/pr_text_white-space.asp
Now, if you're trying to accomplish that they all look similar, the quick, dirty way is to add a minimum height to the containing divs.
http://jsfiddle.net/RFBza/6/
The problem with this is that you're wording will constantly change, so the actual height may change (and like you said, it's responsive so as you resize this will no longer work either)
There are several other techniques to get this desired effect, but they all require either some JQuery, some markup changes, or even PHP (for if you want a string to only be so many characters, otherwise show ellipsis) etc...
You could even go as far as adding that to the p selector in your CSS, but be careful because that would apply to every single paragraph. Maybe you can use a few more selectors to get specific.
p
{
white-space:pre-wrap;
min-height:192px
}
http://jsfiddle.net/RFBza/7/
Also, use PHP to determine a length and show an ellipsis if it exceeds that. In this case, 50 characters.
echo mb_strimwidth("Your paragraph goes here", 0, 50, '...');
I can not remember what it was that was basically blank, but also worked as a space. It's something like &nlsp; or something like that.
I was using but I really wanna remember this one. I wish I could word the post better to explain what I'm talking about, but I'm sure someone here understands just by the confusion of &nlsp;
It is used for non-line breaking space in html.
and
having too many consecutive is eye itching and bad. If you want bigger space to be generated then use a <span class="spaceOf5px"> <span>. This is useful only as inline space. For block level, use DIV tag.
/*CSS for Wide Space Class*/
.spaceOf5px{
width: 5px;
}
.spaceOf10px{
width: 10px;
}
Remember - there is a space between the span tags.
It is . You can find out more about it in several online references, such as wikipedia. It stands for non-breaking space.
is the HTML entity for non-breaking space. No line break will occur between words separated by a non-breaking space even in the cases where a browser would normally perform text wrapping.
is a Non-Breaking SPace in HTML. Normally in HTML, when multiple spaces separate text, as seen here,
<h3>Before spaces After spaces</h3>
the browser renders them as only one space:
However, if you use , the browser renders each space as non-breaking:
<h3>Before spaces After spaces</h3>
The spaces do not collapse to one (hence 'non-breaking'). Each space is rendered: