I am using WordPress and applying a class to a section of post text.
Here is my post text
<p>
<span class="disclaimer">A really long line of text that covers more than one line.</span>
</p>
Here is my CSS
p > .disclaimer {
font-size: 50%;
line-height: 50%;
}
Here is my issue:
The font becomes 50% smaller but the line-height does not. No matter what value I input for line-height it will not size properly. The text shows huge spacing when the line wraps around.
You need to put the line-height on the p rather than the span:
p {
line-height: 50%;
width:100px; /* for example only*/
}
.disclaimer {
font-size: 50%;
}
<p><span class="disclaimer">A really long line of text that covers more than one line.</span></p>
try
p > .disclaimer {
font-size: 50%;
line-height: 50%;
display:block;}
line-height works differently for inline elements than it does for block elements.
Try display: block; in your span's css, or if you need to use the span as inlined element you can reference here
Related
I need to set margins between lines in one paragraph. How I can do this? I need to make something like this:
HTML:
<p>Any creative project is unique
and should be provided with
the appropriate quality</p>
I tried to put each line in <span> and set margin-bottom to it, but it not working.
Just wrap your whole text in a <span> tag and use line-height for margins and padding for spacing between text and background
Stack Snippet
p {
font: bold 30px Verdana;
}
span {
background: red;
line-height: 45px;
color: #fff;
padding: 3px;
}
<p><span>Any creative project is unique and should be provided with the appropriate quality</span></p>
If you want to use <span> with margin you need to set also display: inline-block; or display: block; to the <span>
p {
width: 200px;
}
p > span {
display: inline-block;
margin-bottom: 5px;
background-color: orange;
}
<p>
<span>Any creative project is unique</span>
<span>and should be provided with</span>
<span>the appropriate quality</span>
</p>
U can use <br> between each lines or just put a span with a height between each line, something like this:
<p>Any creative project is unique</p>
<span style="height: 10px;"></span><p>panand should be provided with</p>
Try using line-height property in your .css file referencing te element enclosing the text.
This div is inside a 'page-container' div with a 'content div inside it, but the issue can be reproduced without those (as seen in the Fiddle below).
HTML:
<div class="download_link">Download PDF</div>
CSS:
.download_link {
margin: 0 auto;
width: 200px;
border-radius: 5px;
transition: 0.5s;
background-color: lightblue;
text-align: center;
font-family: 'Source Serif Pro';
font-weight: 600;
font-size: 25px;
}
.download_link:hover {
transition: 0.5s;
background-color: limegreen;
}
The div links properly and even changes color on hover. But the link stretches across the entire container. I have tried changing the width of all sorts of things.
>>> Convenient JSFiddle <<<
Generic division (div), by default, is a block element. Blocks, regardless of their width, take an entire line to themselves within their parent. In your case, the parent of the div is an anchor tag, which, by default, is inline. Inlines, likes absolute elements, inline-blocks, and floats, shrink-wrap around their children. The block within an inline inherently wants to "have" a line to itself, which is why it makes its parent stretch to the right and left edges of its body parent.
Franky, placing a div inside an anchor makes little sense. All you really need is just an anchor tag that serves its purpose. And, interestingly, if you display an anchor as a block, then the clickable link area will only be the width of the anchor. You have less markup and the functionality that you want.
Here's the jsfiddle: http://jsfiddle.net/hhm46/2/.
Here's HTML:
Download PDF
<p>Sample paragraph</p>
Here's CSS:
a[href $= ".pdf"] {
display: block;
margin: 0 auto;
width: 200px;
border-radius: 5px;
transition: background-color 0.5s;
background-color: lightblue;
text-align: center;
font-family: 'Source Serif Pro';
font-weight: 600;
font-size: 25px;
}
a[href $= ".pdf"]:hover {
transition: 0.5s;
background-color: limegreen;
}
You should wrap the anchor tags inside the div, not outside. Fiddle.
<div class="download_link">Download PDF</div>
Simple, div is a block level element by default. Change it to display:inline-block or display:inline.
Inline Block Demo: http://jsfiddle.net/3Ld8U/2/
Though as #josh mentioned you may be better off putting the a inside the div
Two ways to do this:
I found a workaround for you:
<div id=wrapit style="width:200px; margin:0 auto 0 auto;">
<a href="http://www.example.com">
<div class="download_link">Download PDF</div></a></div>
If you would like for the anchor tag to go in the div like the others have recommended, I recommend you increase the padding of the anchor tag so that it extends to the edge of the borders.
.download_link a {
padding: 0 20px 0 20px;
}
I would like to place a responsive text block on top of an image that I have set up based on this dated tutorial and amended based on this previous question.
Unfortunately there appears to be a couple of bugs. the span.spacer used to create padding either side of the line break appears taller than the rest of the text block, and I also think it is causing the text to not align left correctly. The development page can be viewed here. You can see a taller black block at the end of the first line of text, and a taller black block at the beginning of the second line.
The CSS i'm using is
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
.image h2 {
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
text-shadow: none;
}
h2 span {
color: #fff;
font-size: 110%;
width: 40%;
line-height: 110%;
padding: 0 20px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
}
h2 span.spacer {
padding:0 5px;
}
The HTML is
<div class="image">
<img alt="Trekking" src="http://davidkneale.com/wc/wp-content/uploads/borneo_trek_mock.jpg" />
<h2><span>Trekking:<span class='spacer'></span><br />
<span class='spacer'></span>It's a Jungle Out There</span></h2>
</div>
Any advice on a fix for this or a better way to do it much appreciated!
It is becase you have span element in another span element (they are overlaid) and CSStyle is applied to both.
I think you can modify selector to: h2>span {...},
You can use one span element for each line (each with diferent look):
<h2>
<span class="big">Trekking:</span>
<br>
<span>It's a Jungle Out There</span>
</h2>
h2 span {
color: #fff;
font-size: 110%;
line-height: normal;
padding: 0 20px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
display: inline-block;;
}
h2 span.big {
font-size:130%;
}
Width 40% was too short.
The reason for the increased height is the span within a span causing the font-size 110% to be applied twice. Set font-size 100% on the spacer.
You also probably want an increased line height (more like 140% than 110% with the font you're using), and a spacer padding of 10px to match the 20px of the start/end. It does feel like there should be a simpler way to do this!
You are right, this tutorial is quite outdated – I would not bother with that “spacer-span” mumbo-jumbo at all.
And while it is not possible to have a horizontal padding applied to each line of an inline element (it’ll only be applied before the first and after the last line) – it is possible to use box-shadow to achieve a similar effect (as long as only a background color is required, and not f.e. an image).
<div>
<img src="http://davidkneale.com/wc/wp-content/uploads/borneo_trek_mock.jpg">
<h2><span>Trekking:
It’s a Jungle Out There</span></h2>
</div>
div { position:relative; }
img { display:block; max-width:100%; }
h2 { position:absolute; bottom:0; left:.5em; white-space:pre; line-height:1.333; }
h2 span { padding:.125em 0 .125em .25em; background:rgba(0,0,0,.75); color:#fff;
box-shadow:-.5em 0 0 rgba(0,0,0,.75), .5em 0 0 rgba(0,0,0,.75); }
See it here in this fiddle: http://jsfiddle.net/FXJEL/
I gave the span element a padding-left here to have the first line of text be slightly moved to the right, as in your example – assuming that is a desired effect; if not, simply remove it.
And instead of using a <br> to break the text into two lines, I used
for a line break character, and white-space:pre to have it displayed as such. But feel free to change that back to using a br element if that seems more convenient.
The span element inside the h2 is necessary here to have an inline element, because only that will behave like this regarding the element dimensions; under normal conditions, one could of course make the h2 display as inline, but that does not work here, because the h2 is positioned absolutely, and that “overwrites” display:inline, and one would end up with a box that is as wide as the whole text.
I have a paragraph surrounded by decorative quotes. The layout is fluid, and for some width, only the decorative quote is wrapping, which I want to avoid.
Screenshot :
Code : http://jsfiddle.net/84EDh/1/ (Note: not tested outside of Chrome)
<p>
<span class="bigchar ldquo"></span>
Begin paragraph [...paragraph content...] end paragraph.
<span class="bigchar rdquo"></span>
</p>
css:
p { position: relative; }
.bigchar {
display: inline-block;
width: 20px;
}
.bigchar:after {
color: #aaa;
font-size: 50px;
position: absolute;
}
.ldquo:after {
content: '“';
top: -10px;
}
.rdquo:after {
content: '”';
bottom: -30px;
}
Possible solution:
Wrap the last word with the closing span in another span
[...paragraph content...] end
<span class="nowrap">
paragraph.
<span class="bigchar rdquo"></span>
</span>
Question:
Is there a more elegant way to achieve the no-wrapping of the last span of the paragraph ?
This is not very semantic, nor easy to achieve because, as you would expect, the content of the paragraph is dynamic, hence not easy to split at the template level.
Edit: css added
Instead of using a span, it's better to use a q, because that's what q elements were designed for!
So the HTML becomes
<p><q class="bigchar">This text is surrounded by quotes. I want
the text to wrap according it's parent width. This is no problem,
it's the default behaviour. However, I would like to avoid the
last span, containing a decoration quote, to wrap.</q></p>
with the CSS
q.bigchar::before {content:'\201C'; font-size:2em; line-height:0;
position:relative; top:.3em; margin-right:.13em;}
q.bigchar::after {content:'\201D'; font-size:2em; line-height:0;
position:relative; top:.3em; margin-left:.13em;}
resulting in this fiddle.
No extra markup is needed.
Note that since I leave the p alone, you can put all kinds of styles (like text-indent) on it, and it will behave as it should.
What about nesting span inside other span?
What we achieve this way is rdquo acting just as a regular text (that means: if you put either no space or non-breaking space between rdquo and last word, it's not going to break into two lines).
Demo here: http://jsfiddle.net/HFE9T/1/
Instead of using additional span elements, try using :before and :after on paragraph like this:
p:after {
color: #aaa;
font-size: 50px;
position: absolute;
content: '”';
bottom: -30px;
}
p:before {
color: #aaa;
font-size: 50px;
position: absolute;
content: '“';
top: -10px;
}
Updated fiddle here
Here is the final markup and CSS to achieve the expected behaviour, inspired by Michal Rybak but without the compromises (except the two span in the markup) :
HTML :
<p>
<span class="quote" attr-char="“"> </span>
Paragraph content Here.
Note the no-line-break here.<span class="quote" attr-char="”"> </span>
</p>
The attr-char attribute is pretty handy to be able to change the quote characters for different languages as with the q element (somewhat)
CSS :
p .quote {
position: relative;
margin-right: 30px; /* Indent text at paragraph beginning */
}
p .quote:before {
position: absolute;
top: 10px;
line-height: 20px;
font-size: 50px;
content: attr(attr-char); /* Take the character from markup */
}
p .quote:last-child:before {
margin-left: 10px; /* Give the closing quote some space */
}
Fiddle :
http://jsfiddle.net/HFE9T/4/
You can add a non-breaking spaces \00a0 before and after the quotes:
<style>
element:before {content: "“\00a0";}
element:after {content: "\00a0”";}
</style>
And then work your way around with negatives margins if you don’t want those space to show.
This should be interesting. Here's what I'm trying to do with CSS:
The words "An Example Alignment" should be in a single <h1> element.
The word "Alignment" should be on the second line (easy with a <br /> tag).
The word "An" should be smaller than the other words (easy with a <span> tag).
So we have:
<h1><span>An</span> Example <br />Alignment</h1>
But here's the catch:
I would also like to align the first letters of the 2nd and 3rd words with each other vertically, and that's where I run into problems.
Here's what it should look like: http://jsfiddle.net/Baumr/H2Pzr/
But that's an ugly solution as there are two <h1> elements.
Any ideas of how to do this with CSS by keeping the HTML the same? Very curious to hear. Thank you in advance.
P.S. I could also put "An" into a separate <span>, but I would prefer to keep everything in a single <h1>.)
I'd do the padding by using two display:inline-block spans, to make sure the right margin is always exactly the same (font width varies, depending on the in-use font face).
<h1>
<span class="padding">An</span> Example <br>
<span class="padding"></span> Alignment
</h1>
CSS:
h1 {
font-size: 30px;
}
.padding {
font-size: 20px;
width: 30px;
display:inline-block;
}
Just beware that IE doesn't always use inline-block the right way (although in this case it should).
Update
An even better solution: http://jsfiddle.net/H2Pzr/9/
Use the table-cell display of elements to automatically put them in two columns:
HTML:
<h1>
<span class="first">An</span>
<div class="second">
Example <br>
Alignment
</div>
</h1>
CSS:
h1 {
font-size: 30px;
}
.first {
display:table-cell;
font-size: 20px;
color: #444;
}
.second {
display:table-cell;
}
I would use two span classes in the same H1 tag:
<h1>
<span class="small-text">An</span> Example
<span class="line-two">Alignment</span>
</h1>
Then update your CSS accordingly:
h1 {
font-size: 30px;
}
span.small-text {
font-size: 20px;
}
.line-two{
display:block;
margin-left: 31px;
}
You don't even need the <br /> since you can just display the second span as display:block;
Updated fiddle here: http://jsfiddle.net/H2Pzr/6/
use two span with different class see jsfiddle
<h1><span class="first">An</span> Example <br>
<span class="second">Alignment</span>
</h1>
Try this: (minimal elements!)
<h1>Example <br>Alignment</h1>
h1 {
font-size: 30px;
margin-left: 31px;
}
h1:before
{
content: 'An ';
font-size: 20px;
margin-left: -31px;
}