I have a problem, but maybe this is not a problem actually! Why below HTML markup is generating a result which seems to be incorrect even using Standard Fonts like Arial?
<span>سلام</span><span>خداحافظ</span>
سلامخداحافظ
Above output shouldn't be this? (ignore space used for simulation)
سلام خداحافظ
Also i have used margin for a tag but same problem.
Thanks in advance ;)
HTML elements do not necessarily break words. There are many legitimate reasons for that.
For instance, you might want to put emphasis on a letter in medial form by wrapping it in a <strong> or <em> element. If that element was considered as a single word, the letter would switch to its isolated form, which would probably not be the effect you're looking for.
Inserting either a non-breaking space ( ) or a zero-width non-breaking space () between the <span> elements fixes your problem.
You can see the results in this fiddle.
As i know span tag doesnt have href. I assume that u mean a tag.
u can use a space character between a tags to get desired result:
سلام خداحافظ
You can also enter an space between the to tags like. there is no need to use html codes:
سلام خداحافظ
Related
The pre tag is used for defining block of preformatted text in order to preserve the tab, text space, line break e.t.c.
But I don't really know while this is not working for me. Am having excess WhiteSpace in all my blog posts.
I have provided a screenshot for view as well as a live url to see the effect of what am trying to explained.
I tried this:
.pre-blog{white-space:pre-line;white-space:-moz-pre-line;white-space:-pre-line;white-space:-o-pre-line;word-wrap:break-word;word-break:keep-all;line-height:1.5em; display:inline;margin:0}
But no luck with it cos it couldn't solve the issue.
Here is one of the blog posts that you can access and see what I am trying to explain.
Screenshot:
the whitespace you show in the screenshot is the space between li items. This is default styling applied for these html elements.
Easiest way to get rid of the space would be to apply display: flex and flex-direction: column to the parent, which is the ol element
You seem to be trying to put <div>s and other elements inside the <pre>. As far as I know that's not how <pre> works; it's only meant to contain plaintext that you want preformatted in a certain way as described here. It's usually used for displaying things like computer code that need all their indentation preserved.
Your screenshot and linked web page seem to be ordinary formatted text. I'm not sure what exactly you're trying to achieve, but <pre> is not the right way to do it; you'll have better luck with proper use of <p> and <br> tags and CSS styling with properties like margin, padding, and line-height. (Depending on your use-case, if you want to avoid manually typing tags, you might want to consider something like Markdown to automatically add the formatting tags for you).
I suggest you replace your <pre> with a <div>, and then post a different question regarding the whitespace if you're not able to figure it out yourself.
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)
While solving a little bug on a website caused by a non-breaking space ( ) I was wondering if there's an opposite.
Is there an HTML code for a breaking space, and if so, what is it?
I saw mention in this question about a zero-width space (), but that won't give any width (obviously).
Does an HTML entity exist for a regular space?
is a regular space (by its numeric ASCII value).
If you are using HTML and you would like more than one space to to appear, will not work. The unfortunate part about is it does not wrap properly because it is a non-breaking space.
For those that reached here looking for a solution, try the CSS
white-space: pre-wrap;
This will allow you to have multiple spaces side by side in a single line. It works great for chat programs.
There are multiple html entities for regular white space, which allow breaking, for instance
Read this article for more information: https://www.codetd.com/en/article/6915972
There may be other blank entities (which won't compact to a single) but there is another workaround for doing some padding but still having some wrapping occur as required:
Use the "ZeroWidthSpace" html entity and alternate with either "nbsp" for clarity or simply a space character.
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 ..."
I want to indent text with several spaces. So I need to put some spaces before the text in order to indent the text. Obviously doesn't work. Is there another symbol that would do that for me. I don't use CSS. Just in a plain html.
Thank you in advance.
This may not be the right way by some peoples standards, but following the OP:
Just in a plain html
&nbps; represents a single space, multiple of them will represent multiple spaces. Html Entities
<pre></pre> also works by telling HTML to allow formatting, preformatted text
Here is a jsfiddle
Use multiple times this combination in your html code:
<p>This will be spaced</p>