I would like to ask how can I give my text ONLY with the background-color property and not the spacing using CSS or HTML or both.
For example,
Hello everyone!
I only want the background-color to show on Hello and everyone! and not the entire length of Hello everyone!
I have tried searching in the Internet but I can't find any solution.
Thanks!
Wrap each word in a span element and give the span elements background colours.
Try placing your text inside a wrapper, and style it with
display: inline;
background-color: whatever;
Note that if you use a wrapper which is inline by default (e.g. <span>), you don't need display: inline.
There's a lot of different ways to do this, but for a beginner I'd recommend wrapping all text with <span>.
Here's a fiddle.
Related
I am setting up a simple blog website and need help formatting the posts that are submitted to the front page of the site.
You can achieve this in multiple ways. Maybe the easiest way is to put your text in a container and give this a width. The text will wrap itself.
<div class="text">Your text here</div>
and your CSS. If you want to break within the word you can use word-wrap:break-word;.
.text {
width: 100px;
}
You have many options for this. simple one put you text in a <div> tag and give width to div as much you like.
<div style="width:100px">"Hello, this is my first post. As you can see, it wraps all the way around the text box and into another line."</div>
You should add a word-wrap css property and set it to break-word. This forces the text to wrap inside a container.
.container {
word-wrap: break-word;
}
In <span> elements in HTML narrative flow, in order to expand the area on which clicks are detected (some of the spans have content of only one character), I am adding padding (offsetting it with a negative margin) in a class defined as
.expand-click-area {
display:inline-block;
padding:5px;
margin:-5px;
position:relative;
}
This works fine in terms of the clicking behavior. The problem is that Chrome 19 will sometimes line break between the span and the following comma in a case such as the following:
<span class="expand-click-area">this is span text</span>,
Any thoughts on how to prevent this? Essentially, I would like breaking behavior equivalent to that when the <span> is not there at all, or does not have display:inline-block.
This behavior does not seem to appear in IE10. See an example at http://jsfiddle.net/58XdJ/1/.
Try wrapping the entire non-breakable text into the <nobr> tag.
In case anybody faces this problem and none of the above solved solutions the problem like in my case, i found that adding this to the span will solve it.
display: contents;
Hope this helps someone ;)
I have a superscript that is messing up the line spacing. How do i make it even?
I tried
sup{vertical-align:0; position: relative;}
but that doesn't help.
Any suggestions?
We can achieve it by ignoring the <sup></sup> tags and directly using something like
<span style="position:relative; top:0.3em;">
You may need to try altering the line height of the sup element to be smaller than the parent text.
sup{vertical-align:super; line-height:0.5em;}
http://en.wikipedia.org/wiki/Superscript has lots of examples that you can inspect. Some of them increase the line height of the parent, some do not.
If that isn't working for you, you can also try
sup{vertical-align:top;}
sup{vertical-align:top; line-height:0.5em;}
This works for me, even though I have sup defined in my stylesheet. I have a link, which also has styling applied, between the <sup> and </sup> tags, but this seems to force the intended effect of keeping the line spacing consistent.
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.
What would be the proper way to do this? I have an <h1> tag, and I want to display a <a> that is inline with it.
display: inline
should do the trick. It will make the <h1> behave like any inline element.
By default the h1 tag has a display:block; Thus changing it to display:inline you will lose the normal feel of an h1. But your link will directly follow it.
Also why not just place the link within the h1 tag? ie:
<h1>Hello World</h1>
Or you could float it to the left (or right):
float: left;
However, this can cause other problems sometimes.
Also, margin-top: - height-of-h1 on a could do the trick - you have like 1000 options (almost literally), we can't tell you more until we see some sample code.
Or you could use a tag:
<h1>Important title <span style="float:right">Link</span></h1>