How can I make the first character of each paragraph look like this:
I'd prefer using CSS only.
p:first-letter {
float: left;
font-size: 5em;
line-height: 0.5em;
padding-bottom: 0.05em;
padding-top: 0.2em;
}
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Tweak the font, padding, line-height as needed.
Example: http://jsfiddle.net/RLdw2/
add this p:first-letter{font-size:50px}
DEMO
Here is the exact solution for your requirement shown in the image
DEMO 2
WIKIPEDIA EXPLANATION
see DEMO here...
CSS///
p{ width:300px; border:1px solid #000;}
p:first-letter
{font-size:52px;color:#8A2BE2;font-weight:bold;float: left;margin-top:4px;}
HTML///
<p>The first character of this paragraph will be 52px big
as defined in the CSS rule above. Rest of the
characters in this paragraph will remain normal. This example
shows how to use :first-letter pseduo element to give effect to
the first characters of any HTML element.</p>
<p>The first character of this paragraph will be 52px big
as defined in the CSS rule above. Rest of the
characters in this paragraph will remain normal. This example
shows how to use :first-letter pseduo element to give effect to
the first characters of any HTML element.</p>
Related
I got some slogans that can either be displayed on a single line or multiple lines if wrapped at specific places. Is there a CSS option to respect a <br> tag only if necessary to fit the container width and leave it unwrapped otherwise?
For example
<div>
They told me that<br> aesthetics matter.
</div>
You can use CSS code to break work
#content::after {
content: "\a";
white-space: pre;
}
<div id="content">They told me that</div>
<div id="break">aesthetics matter.</div>
and also you can define padding instead of height because padding expands the container according to its children and also prevent children to overflow the example is the following
#container {
width: 300px;
padding: 5px;
background-color: grey;
}
<div id="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
You can CSS property word-wrap: break-word; in div to solve your issue. And if it doesn't solve your issue, let me know in comments I will try my best to help you.
I would like to highlight sentences in some text. The normal way is to wrap the sentence in a span element and set a background color:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. <span class="highlight">Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur</span>.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
And:
.highlight{
background-color: yellow;
}
If I now want to use some padding and other styles with this highlight, I have a problem:
.highlight{
background-color: yellow;
padding: 5px;
border-radius: 5px
}
With small highlights, this problem is adequately solved by display: inline-block;. But here I now have the problem of my sentence being, well, a block, breaking the text in three paragraphs:
.highlight{
background-color: yellow;
padding: 5px;
border-radius: 5px;
display: inline-block;
}
Is there a way to use inline-block without all the trouble?
Working JS fiddle
Use line-height property. Do little bit math, if your font-size is 16px and you are adding 5px padding then line-height will be 26px
p{
width: 300px;
}
.highlight{
background-color: yellow;
padding: 5px;
border-radius: 5px;
line-height: 26px;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <span class="highlight">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</span>. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
It sounds to me like you're not entirely clear what you want. Observer has given you a solution that might work for you and might not, since the line height persists throughout your entire paragraph, making all of the lines wider. If that is indeed what you want, then you have your answer.
From a UX perspective, though, it seems to me that you need to take a couple of steps back. Do you really want to set highlighted text apart in such a way as it interrupts the flow of reading? That's what you will do, if you add extra padding to it. The idea that you don't like it to be set apart as a paragraph suggests that you don't want padding to be added to it, because after all that's how a paragraph is set apart.
If you want to keep the sentence in with the rest of the paragraph and pad it as well, you can probably go to the trouble of figuring out exactly how to do it, but you'll notice that a line that has a combination of both highlighted and normal text will have the entire line padded. So you'll have some normal text that will be set apart farther than other normal text, as in Observer's sample. That draws the reader's attention to the text in such a way as to be distracting.
If you wanted it to stick out more than it would by just highlighting it, you could put a border around it, as in my example. But I think that looks a bit off, too, because the border gets broken on line breaks. You might consider putting a border on just the top and bottom as well.
In the end, though, I would stick to what everyone else does, and just change the color. That's what readers are used to, and if you change it, they'll have to take a little time to figure out what you're up to.
.highlight{
background-color: yellow;
border: 1px solid green;
padding: 0 5px;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <span class="highlight">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</span>. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
I have a template :
<font size="2" align="justify"><br/><br/>Some long message</font>
I get justify text in chrome but not in firefox. What might be the solution?
Font tag is deprecated in HTML5 but also is always better to separate structure (HTML) and presentation (CSS).
Use a <p> tag (paragraph) for adding long text.
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
</div>
Also the CSS property to justify text is text-align:justify;
div{
width:500px;
}
p{
font-size:14px;
text-align:justify;
}
If you really have to use inline styles, you can:
<p style="text-align:justify; font-size:14px;">
DEMO http://jsfiddle.net/a_incarnati/undmcszz/5/
The html font tag is deprecated. From w3schools website:
Definition and Usage
The <font> tag is not supported in HTML5. Use CSS instead.
The <font> tag specifies the font face, font size, and color of text.
Source: http://www.w3schools.com/tags/tag_font.asp
Use a supported HTML structure and style it with CSS:
<p>YOUR TEXT</p>
<style>
p {
font-size: 12px;
text-alignment: justify;
}
</style>
This is undoubtedly a stupid question but i'm having a bad day and it's confusing me!
If you view http://jsfiddle.net/E6kGP/1/ then you can see 2 simple divs next to each other each of which contains a p tag each with different font sizes and matching line-heights.
There is a small gap between the top of the p container and the top of the contained text which is different depending on the font sizes (and line-heights). This means that the top of the text in each p is not vertically aligned. If the line-heights didn't match the font-sizes then I could understand this but surely if they are the same then the line-heights should match the tallest character and hence the highest point of the first line should be the top of the p container? Obviously this can be hacked using padding/margins or absolute positioning but i would like to understand why this doesn't work by default and what the correct way is to fix it?
As requested by SO the code from jsfiddle is also below:
div {float: left; width: 50%;}
p {margin:0 0 1em;padding:0;}
#left p {line-height:36px;font-size:36px;}
#right p {line-height:16px;font-size:16px;}
<div id="left">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="right">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
Thanks very much as ever everyone!
It might be to accommodate accented characters, try putting Ä into the first <p>, the extra space helps accommodate the accent. That said, I'm not 100% convinced that is the definitive reason.
You can always specifically target the first line of a <p> element to reduce it using:
p::first-line {
line-height: 0.8em;
}
Though granted, that doesnt solve the 'why' issue.
Like ExtPro has said, it's to accommodate accented characters. A simple work around is to have margin-top:-<number>px; so that you manually align it.
In the following code I try to format the strong element in a way, that it occupies additional space (1em) around itself. The text to the left an the right is displaced by the strong-element, but the additional space at the bottom and the top does not displace the text. How can I solve that problem?
<html>
<head>
<title>CSS test</title>
<style type="text/css">
h1 {
text-decoration: underline;
}
strong {
padding: 1em;
border: 1px solid #000;
}
</style>
</head>
<body>
<h1>test</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure <strong>dolor</strong> in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</body>
</html>
If you mean that there should be empty space above and below the strong element, causing rather gross appearance when lines are so apart, add
strong { display: inline-block; margin: 0.5em 0; }
The value inline-block is not supported by some browsers that are outdated but still in some use. In that case, the margin settings are ignored, too.
You can do it with the line-height property, like this, but 1em is already default vertical distance. It also displaces the whole line (not just text immediately above and below), which may or may not be desirable.