What is a good way to put more than one space in HTML?
To show one space we write . For five spaces, we have to write five times, and so on.
Is there a better way? Is there a special tag to use?
You can use the
<pre>a text with multiple spaces</pre>
tag.
As far as I know, if you are not using CSS then is the only way. These days using CSS and adding a spacer <span> would be more advisable.
You could use something like <span style="margin-left: 20px;"></span> to create some sort of 20px space between two words. Other than that, no.
It is often best to handle this with CSS instead of HTML. CSS gives you more control over the whitespace than the <pre> tag does. Also, browsers apply default styles to <pre> that you might not want.
.pre {
white-space: pre;
}
.pre-wrap {
white-space: pre-wrap;
}
body {
max-width: 12em;
}
<div class="pre">Text that preserves whitespace and does not wrap</div>
<div class="pre-wrap">Text that preserves whitespace and wraps as needed</div>
<pre>Text inside a <pre> tag also preserves whitespace</pre>
To actually insert spaces you are stuck with , the other common thing for spacing things out is to use 1x1 pixel gif and set the images with in the IMG tag.
The simplest way I have used is to add <span style="color:white;">(anything here)</span>
The bit in the span can be as long or as short as you like- it's not seen. The color of course is the color of the page/section where you place it. I prefer XXXXXXX as X is standard width (unlike M and I) and it's easy to see how many Xs you will need for a given space.
Related
Silly question but I was wondering if it is possible to add a large spacing inside my div text. For example,
<div>Hello there</div>
Would I have to modify it in css? Is there a way of doing it without css.
If you want to avoid CSS, you can use to force an extra space character, for two spaces, and for four spaces. However, I do not get why you seem uneager to use CSS to achieve this.
You usually use HTML to show the content (and its meaning). In this case, a lot of spaces aren't meaningful to your content. To change the appearance of your content, you should consider using CSS instead. That being said, as requested, here's how you add space without using CSS.
<div>Hello there</div>
<div>Hello there</div>
<div>Hello there</div>
I agree with the others that CSS is the way to go here. For example:
div {text-align:justify; text-align-last:justify;}
<div>hello there</div>
Or, with inline CSS rather than external:
<div style="text-align:justify; text-align-last:justify;">hello there</div>
But if it's impossible to use CSS, can you change your html? There are lots of ways of doing this with html. Example:
<table width="100%"><tr><td>hello</td><td align="right">there</td></tr></table>
You can insert a longer space by using any one of the following options:
Two spaces - Type
Four spaces - Type &emsp
Indent - Type  
You can add this in the html for space or margin-left and you can control the space of changing the number
span{
margin-left: 80px;
}
<div>Hello <span>there</span></div>
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 ..."
Take a look at the following fiddle:
http://jsfiddle.net/DNhAk/14/
When you have an image with text wrapped in an anchor/link, the whitespace between the image and the text in the code creates a underlined whitespace in the rendered page right before the text.
When there is no image, there is no underlined whitespace even though there is whitespace in the code.
The only way I can see the avoid this underlined whitespace is to eliminate the whitespace in my code. But I hate altering my coding style in order to alter the presentation of the rendered page. Anyways, altering your HTML in order to manipulate the presentation of a page is wrong anyways. It's like using line breaks (<br/>) to add space between elements instead of using CSS.
Is there a not-so-obvious-to-me CSS property that is used to fix this issue?
UPDATE
For some reason people are getting hung up on the image borders and margin that I had in the code. I only put them in there to make it look nice. They have nothing to do with the problem, so I removed them and updated the fiddle just so people can understand more clearly what the problem is.
You could set the CSS for the a element like this:
a {
display: inline-block;
}
You can emulate the effect with some CSS:
img {
border: 1px solid #CCC;
padding: 10px;
vertical-align: middle;
float:left;
}
a {
display:block;
height:70px;
line-height:70px;
}
http://jsfiddle.net/DNhAk/8/
The behavior you are experiencing is part of the spec ( http://www.w3.org/TR/html401/struct/text.html ) :
For all HTML elements except PRE, sequences of white space separate "words" (we use the term "word" here to mean "sequences of non-white space characters"). When formatting text, user agents should identify these words and lay them out according to the conventions of the particular written language (script) and target medium.
This layout may involve putting space between words (called inter-word space), but conventions for inter-word space vary from script to script. For example, in Latin scripts, inter-word space is typically rendered as an ASCII space ( ), while in Thai it is a zero-width word separator (). In Japanese and Chinese, inter-word space is not typically rendered at all.
So by adding an element (img) followed by whitespace (newline) in your markup, you instructed the agents to interpret your image as a "word", and add whitespace as appropriate to the language the agent is set in. If you would like to remove this whitespace from the result, you will need to remove it from the markup.
Alternately, you could remove the image from your markup entirely, and place it instead as a background on the anchor, thus eliminating any presentation pieces from your markup. Example here:
<a href='#' class="imglink">
There is
<em>no</em>
underlined whitespace at beginning of this text</a>
CSS:
.imglink {
min-height: 50px;
background: transparent url("http://www.cadcourse.com/winston/Images/SoccerBall.jpg") no-repeat;
background-size: 50px 50px;
display: block;
padding-left: 55px;
line-height: 50px
}
There are some weaknesses to this method of course, but it is a potential solution depending on your other constraints.
http://jsfiddle.net/hellslam/pvHK8/
this is the expected behavior, since there are spaces after the images:
You must change your html structure, use instead :
<a href='#'>
<img src='SoccerBall.jpg'/> <span>Your text</span>
</a>
CSS :
a{text-decoration:none;}
a>span{text-decoration:underline;}
Use two separate links for different elements, which are inside the current . I haven't seen yet a CSS fix. It is because the whole area is considered link, obviously. This workaround is working from the time being.
<a href='#'>
<img src='http://www.cadcourse.com/winston/Images/SoccerBall.jpg'
width='50' height='50'/>
</a>
<a href='#'>
No Underlined Whitespace
</a>
Get rid the space in the anchor between the image and the text (this is what's being underlined). In your css, give img 'margin-right:10px' (or whatever value you want). Remove the padding.
EDIT
To clarify:
Inserting a space character after the image does not fall under "coding style" - you have specifically encoded a space into the text value of the anchor.
CSS is behaving as intended in this regard: it is styling the text content of the anchor (including the space) with an underline, because you have not overridden that behavior for text content in an anchor.
By removing the space you are not altering your coding style, you are altering the content. It so happens that this will eliminate the styling issue you are facing.
I understand that you're asking if there's a way to retain the space in the anchor and also target that character with CSS - I don't think there's a way to do that.
I'm pointing out that by removing the space you are not altering the semantics of the content in any meaningful way (certainly not visually, because you want to hide it anyway, so the only possible effect it could have is for non-visual agents, most of which do not convey spacing in a meaningful way in this context anyway).
In fact, I suspect that the intent of that space character is more presentation-oriented than semantics-oriented.
Altering HTML for presentation purposes is not ideal, but generally it's not about altering your HTML per se - it's about altering the meaning which you are conveying with HTML. In this instance I believe it's entirely correct to alter your HTML to convey the same meaning.
There are times when you alter your document to suit both your semantic needs and your styling needs - as long as you're conveying the same meaning and logical flow of information, it really isn't an issue for the consumer of the content.
I certainly agree with your question and think it is well thought out and brings up a very good point. As referenced in this SO question, there is an experimental CSS3 property called text-space-collapse that has proposed values of discard, trim-inner, trim-before and trim-after which all could be used to resolve this problem.
I think the best solution you are going to find until text-space-collapse is implemented will be to alter your markup slightly. You can wrap the text in a span and then use display: table as one solution.
http://jsfiddle.net/CPh82/
a { display:table; }
a > * { display: table-cell; vertical-align: middle; }
<a href='#'>
<img src='http://www.cadcourse.com/winston/Images/SoccerBall.jpg' width='50' height='50'/>
There is underlined whitespace at beginning of this text
</a>
instead of padding, try margin
img {
border: 1px solid #CCC;
margin: 10px;
vertical-align: middle;
}
I came across an interesting problem today. I have a text email I'm sending from a Web page. I'm displaying a preview and wanted to put the preview in a fixed font retaining the white space since that's the way the plain text email will appear.
Basically I want something that'll act like Notepad: the newlines will signal a newline but the text will otherwise wrap to fit inside it's container.
Unfortunately this is proving difficult unless I'm missing something really obvious. I've tried:
CSS white-space: pre. This retains white space but doesn't wrap lines of text so they go out the borders on long lines;
Styling a textarea element to be read only with no border so it basically apepars like a div. The problem here is that IE doesn't like 100% heights on textareas in strict mode. Bizarrely it's OK with them in quirks mode but that's not an option for me.
CSS white-space: prewrap. This is CSS 2.1 so probably not widely supported (I'm happy if it's supported in IE7 and FF3 though; I don't care about IE6 for this as its an admin function and no one will be running IE6 that will use this page).
Any other suggestions? Can this really be that hard?
edit: can't comment so more info. Yes at the moment I am using font Courier New (i.e. fixed width) and using a regex on the server side to replace the newlines with <br> tags but now I need to edit the content and it just strikes me as awkward that you need to strip out and add the <br>s to make it work.
is there no better way?
Try
selector {
word-wrap: break-word; /* IE>=5.5 */
white-space: pre; /* IE>=6 */
white-space: -moz-pre-wrap; /* For Fx<=2 */
white-space: pre-wrap; /* Fx>3, Opera>8, Safari>3*/
}
Just replace all your hard line breaks with <br/> and put the text into a div with the desired width. You can do the same with spaces: Replace them with .
Be sure you do this after you escape the special characters into HTML, otherwise the are not interpreted but printed on the page.
Try replacing any double spaces with - which should work to make your look of double spaces come through.
Crack all those new line and hard enters out with <br />.
Style the text output to make it look like a fixed-width with the font-family:
font-family:monospace;
You may need to size it up properly, something smaller than the surrounding text, but that will give you the look of a PRE, and what a plain text email will look like.
Put it all in a DIV with a fixed with and that could be worth a look.
create a <pre></pre> tag or use something like
<p style="width:800px">
....
</p>
with fixed width, i think text are wrapped
I have some table cells containing dates formatted like this: 2009-01-01. I.E 7 seems to be breaking these into two lines at the hyphen. Is there any way to turn this off?
You are looking for the white-space property, which affords you control over how white space and line-breaks affect the content of your element. To collapse white space sequences, but prevent line-breaks, you can use the nowrap value:
.dates {
white-space: nowrap;
}
<td class="dates">2009-01-01</td>
I'm sure there's a better CSS way but the old way is with a no-break: <nobr>...</nobr> but using no-break will cause nothing to go to the next line.
Another way is to use a Non-breaking hyphen. This way, you can still get wrapping, just not at the hyphen.
Use this CSS:
.nowrap {
white-space: nowrap;
}
Wrap your dates like: <span class="nowrap">2009-01-01</span>.
Edit: the advantage of this solution over others is that it gives you more precise control over what should or should not wrap. Your cells may still wrap for spaces and other hyphens, outside the span.
I've tried all these suggestions. None worked. Found the solution on another Stack Overflow page: No line-break after a hyphen. You can use the code for non-breaking hyphen, ‑.
increase the size of your TD and it wont be a problem
This is NOT the correct way of answering your question, but this is how I do it:
<td>Hello - World</td>
I like this method better because you do not need to add a <style> or class attribute. Also, it makes the text one string so that it cannot be line wrapped by the browser.
Like I said, most people would disagree, but I think this is where a practical solution is better than the standards solution.
My stupid mistake was that I forgot to put spaces between as I set spacing with padding. I had like
<span>Bla 1</span><span>Bla 2</span><span>Bla 4</span> and it wasn't breaking line as I thought it should. So now I have:
<span>Bla 1</span> <span>Bla 2</span> <span>Bla 4</span>
and of course it works as it should and is anticipated.
Maybe my mistake will help someone....