Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I have a paragraph split up as follows:
<a href="#" class="nostyle">
<p>
<span class="heading">Really long heading</span><br>
<br>
Lots of text that needs to be justified
</p>
</a>
The paragraph is set to text-align: justify, which it needs to stay at.
I want just the <span> to be text-align: left, so that large gaps don't form between rows. How can I do this?
I want to keep it all as a single paragraph, as it's part of a flex item and having a <h2> and <p> means it won't all work nicely!
Thanks.
The problem is that inline elements do not have a width and cannot be affected by text-align. To fix this, you can set the <span> to display: block and then it should display with the text aligned to the left, as shown in the snippet below.
NOTE: that I changed text-align: justify to text-align: center in the below snippet to make it easier to see.
p {
text-align: center;
}
p span {
display: block;
text-align: left;
}
<a href="#" class="nostyle">
<p>
<span class="heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi convallis magna sit amet sollicitudin posuere. Vestibulum justo ex, lacinia dictum mollis et, egestas eu ipsum.</span><br>
<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi convallis magna sit amet sollicitudin posuere. Vestibulum justo ex, lacinia dictum mollis et, egestas eu ipsum. Aliquam posuere purus vitae justo mollis lobortis vel vitae sapien.
Sed sapien nibh, tincidunt sed risus vel, vestibulum euismod augue. Quisque molestie vehicula magna, eget pulvinar augue pellentesque nec. Praesent venenatis risus placerat dapibus rhoncus. Aliquam lacinia, dolor non tristique congue, est nunc bibendum
erat, id varius augue turpis id ipsum.
</p>
</a>
However, I really suggest using to <p> tags here because that's what they're for. Also note that you're using two <br/> tags to separate the span from the rest of the text and <p> tags implicitly have a <br/> before and after, so switching to multiple <p> would not change the spacing. See below:
p {
text-align: center;
}
p.heading {
text-align: left;
}
<a href="#" class="nostyle">
<p class="heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi convallis magna sit amet sollicitudin posuere. Vestibulum justo ex, lacinia dictum mollis et, egestas eu ipsum.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi convallis magna sit amet sollicitudin posuere. Vestibulum justo ex, lacinia dictum mollis et, egestas eu ipsum. Aliquam posuere purus vitae justo mollis lobortis vel vitae sapien.
Sed sapien nibh, tincidunt sed risus vel, vestibulum euismod augue. Quisque molestie vehicula magna, eget pulvinar augue pellentesque nec. Praesent venenatis risus placerat dapibus rhoncus. Aliquam lacinia, dolor non tristique congue, est nunc bibendum
erat, id varius augue turpis id ipsum.
</p>
</a>
Related
This question already has answers here:
Drop-caps using CSS
(3 answers)
Closed 7 years ago.
I have some text that I want to format so that the first letter to be big. The text looks like this without CSS:
<p>
<span>V</span>estibulum et arcu sodales dolor sagittis sollicitudin. Pellentesque vitae eros nec lacus iaculis viverra. Maecenas vitae sapien et augue tincidunt elementum. Pellentesque velit. Mauris eget tellus. Proin ultricies scelerisque magna. Sed
pretium tempor mi. Aenean vel lacus. Cras quam. Ut faucibus enim sed mauris. Morbi malesuada nunc eu arcu. Integer quam. Quisque ac nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ac mi sit amet ante aliquet euismod. Ut suscipit.
In turpis. In at diam nec elit malesuada venenatis. In nec leo nec est ullamcorper nonummy. Suspendisse in nisl. Nam dolor. Nunc
</p>
If I just set the font-size of span bigger than the paragraph's, the letter does get bigger, but the next letter starts at the bottom right. I need to have the next letter start at the top right, and the paragraph's lines to flow around the big letter. I have tried using vertical inline but can't seem to manage to get it right.
is that what you need ?
p:first-letter {
float: left;
font-size: 5em;
line-height: 0.5em;
padding-bottom: 0.05em;
padding-top: 0.2em;
}
<p>Vestibulum et arcu sodales dolor sagittis sollicitudin. Pellentesque vitae eros nec lacus iaculis viverra. Maecenas vitae sapien et augue tincidunt elementum. Pellentesque velit. Mauris eget tellus. Proin ultricies scelerisque magna. Sed pretium tempor
mi. Aenean vel lacus. Cras quam. Ut faucibus enim sed mauris. Morbi malesuada nunc eu arcu. Integer quam. Quisque ac nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ac mi sit amet ante aliquet euismod. Ut suscipit. In turpis. In
at diam nec elit malesuada venenatis. In nec leo nec est ullamcorper nonummy. Suspendisse in nisl. Nam dolor. Nunc</p>
Using float: left; in the CSS that affects the first letter should make the remaining text wrap around it.
As a side note, you can just use the ::first-letter pseudo element to affect the first letter of an element.
For example, to the first letter of each <p>:
p::first-letter {
font-size: 130%;
float: left;
}
CSS code:
h4 {
display: inline;
font-weight: bolder;
font-size: 100%;
margin: 0;
}
HTML test code:
<html>
<head><link rel="stylesheet" href="style.css" type="text/css" /></title>test</title></head>
<body>
<p>Let's try to make a header be inline with the next paragraph.</p>
<h4>This is a header.</h4>
<p>A header is an HTML element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam consequat enim eget porta. Proin condimentum dui sed tortor semper, non scelerisque risus volutpat. Vivamus vel risus in purus imperdiet finibus. Phasellus placerat nunc a orci ullamcorper, non ultricies neque auctor. Integer magna lectus, vulputate laoreet auctor eu, gravida et lorem.</p>
<p>And now we have some more text.</p>
</body>
</html>
Expected output:
Let's try to make a header be inline with the next paragraph.
This is a header. A header is an HTML element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam consequat enim eget porta. Proin condimentum dui sed tortor semper, non scelerisque risus volutpat. Vivamus vel risus in purus imperdiet finibus. Phasellus placerat nunc a orci ullamcorper, non ultricies neque auctor. Integer magna lectus, vulputate laoreet auctor eu, gravida et lorem.
And now we have some more text.
What I'm actually getting:
Let's try to make a header be inline with the next paragraph.
This is a header.
A header is an HTML element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam consequat enim eget porta. Proin condimentum dui sed tortor semper, non scelerisque risus volutpat. Vivamus vel risus in purus imperdiet finibus. Phasellus placerat nunc a orci ullamcorper, non ultricies neque auctor. Integer magna lectus, vulputate laoreet auctor eu, gravida et lorem.
And now we have some more text.
I'm almost positive the issue is the fact that I'm starting a new paragraph right after the header. The problem is, the HTML code I'm applying styles to is not my own - it's generated by another tool which I don't have source code for, so I can't just, say, eliminate the paragraph, or add styling to the paragraph directly. Can the above be done with exactly the given HTML code and only using CSS?
Edit: The proposed solution of using h4; h4 + p does work - provided there are at least two paragraphs following the <h4> tag. The following HTML code will cause undesired results:
<html>
<head><link rel="stylesheet" href="style.css" type="text/css" /?</title>test</title></head>
<body>
<p>Let's try to make a header be inline with the next paragraph.</p>
<h4>This is a header.</h4>
<p>A header is an HTML element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam consequat enim eget porta. Proin condimentum dui sed tortor semper, non scelerisque risus volutpat. Vivamus vel risus in purus imperdiet finibus. Phasellus placerat nunc a orci ullamcorper, non ultricies neque auctor. Integer magna lectus, vulputate laoreet auctor eu, gravida et lorem.</p>
<h4>This is another header...</h4>
<p>And now we have some more text.</p>
</body>
</html>
Results:
Let's try to make a header be inline with the next paragraph.
This is a header. A header is an HTML element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam consequat enim eget porta. Proin condimentum dui sed tortor semper, non scelerisque risus volutpat. Vivamus vel risus in purus imperdiet finibus. Phasellus placerat nunc a orci ullamcorper, non ultricies neque auctor. Integer magna lectus, vulputate laoreet auctor eu, gravida et lorem. This is another header... And now we have some more text.
Expected result:
Let's try to make a header be inline with the next paragraph.
This is a header. A header is an HTML element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam consequat enim eget porta. Proin condimentum dui sed tortor semper, non scelerisque risus volutpat. Vivamus vel risus in purus imperdiet finibus. Phasellus placerat nunc a orci ullamcorper, non ultricies neque auctor. Integer magna lectus, vulputate laoreet auctor eu, gravida et lorem.
This is another header... And now we have some more text.
I'd modify #Nit's code by adding a pseudo-element before your h4:
h4,
h4 + p {
display: inline;
}
h4:before {
content: "";
display: block;
clear: left;
margin-top: 1em;
}
Sounds like you simply want to make the header and the paragraph following right next to it inline?
h4,
h4 + p {
display: inline;
}
<p>Let's try to make a header be inline with the next paragraph.</p>
<h4>This is a header.</h4>
<p>A header is an HTML element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam consequat enim eget porta. Proin condimentum dui sed tortor semper, non scelerisque risus volutpat. Vivamus vel risus in purus imperdiet finibus. Phasellus
placerat nunc a orci ullamcorper, non ultricies neque auctor. Integer magna lectus, vulputate laoreet auctor eu, gravida et lorem.</p>
<p>And now we have some more text.</p>
I have an paragraph and an image (See Example in CodePen):
<div>
<p>
Lorem ipsum dolor sit amet ...
<img src="http://placehold.it/200x200"/>
</p>
</div>
And the following CSS:
div {
margin: 0 auto;
width: 60%;
}
img {
float: right;
padding: 20px;
}
How can I wrap he text around the image?
I tried float:right but this does not seem to work.
Place the image before the text:
<div><img src="http://placehold.it/200x200"/>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec eros enim. Donec et scelerisque nisl, nec luctus massa. Nullam ut laoreet sem. Sed ligula elit, auctor et sagittis facilisis, auctor in nulla. Nulla suscipit dignissim feugiat. Vivamus lacinia tellus elit, non bibendum purus tempus eget. Sed porttitor accumsan lacus, at aliquam nisi rutrum nec. Donec a dignissim tortor. Curabitur blandit non turpis tristique tincidunt. Sed dictum sem id sem lacinia mattis. Quisque pellentesque, sem sit amet auctor congue, enim lorem egestas nisi, sit amet accumsan turpis turpis et metus. Mauris pulvinar luctus felis, in feugiat dui vulputate ac. Sed faucibus libero nulla, placerat accumsan elit rutrum et. Maecenas id enim quis turpis pretium sollicitudin.
</p>
</div>
codepen example
You're using float correctly with the image, but since in your original example the image is coming after the text, you don't notice the effect. By moving the image before the text, it gets floated to the right, and the text that comes after it is then allowed to float up alongside it.
put the image at the top
<img src="http://placehold.it/200x200"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec eros enim...
I have an HTML structure like this:
<div>
<div style="position:relative;">
<div style="position:absolute;float:left;top:0;left:0;width:50px;">57</div>
<div style="width:550px;position:absolute;float:left;top:0;left:50px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed ipsum eu justo ornare euismod. Suspendisse bibendum venenatis nisl, ut blandit odio aliquet sit amet. Donec ultricies purus eu metus faucibus venenatis. Donec imperdiet sagittis pretium. Quisque pellentesque malesuada eros sit amet fringilla. Cras egestas vehicula pharetra. Nunc mattis aliquam erat pharetra tempus. Sed magna dui, facilisis nec pharetra dignissim, lobortis vel nulla. Etiam tellus dui, dapibus sit amet sodales vitae, tempus eu felis. Nam interdum sagittis libero, nec sagittis nisl dapibus et. Nulla facilisi.</div>
</div><br /><br />
<p style="margin-left:50px;">This is my paragraph</p>
</div>
As you can see from THIS FIDDLE, My Lorem Ipsum text overlaps with my paragraph. I tried putting somme <br /> between my div and my paragraph, but they still overlap. I want my paragraph to appear after my text. Any help please?
Thank you
You don't use position:absolute with a float. You can just use the float in this case and get rid of position and the related css.
Just this would be fine:
<div>
<div style="position:relative;">
<div style="float:left;width:50px;">57</div>
<div style="width:550px;float:left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed ipsum eu justo ornare euismod. Suspendisse bibendum venenatis nisl, ut blandit odio aliquet sit amet. Donec ultricies purus eu metus faucibus venenatis. Donec imperdiet sagittis pretium. Quisque pellentesque malesuada eros sit amet fringilla. Cras egestas vehicula pharetra. Nunc mattis aliquam erat pharetra tempus. Sed magna dui, facilisis nec pharetra dignissim, lobortis vel nulla. Etiam tellus dui, dapibus sit amet sodales vitae, tempus eu felis. Nam interdum sagittis libero, nec sagittis nisl dapibus et. Nulla facilisi.</div>
</div><br /><br />
<p style="margin-left:50px;">This is my paragraph</p>
</div>
Though, as the comments suggest - you should put this in a stylesheet and avoid inline declarations. It's cleaner and tends to be easier to maintain.
Remove your position absolute and put clear: both to your paragraph to reset the floating elements
<div>
<div style="position:relative;">
<div style="float:left;width:40px;">57</div>
<div style="width:550px;float:left;left:40px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed ipsum eu justo ornare euismod. Suspendisse bibendum venenatis nisl, ut blandit odio aliquet sit amet. Donec ultricies purus eu metus faucibus venenatis. Donec im.</div>
</div>
<p style="clear: both;margin-left:40px">This is my paragraph</p>
</div>
Live exemple here
If you are using floats why are you mixing it with absolute positions?
I've changed this a little.
<div style="float:left;width:40px;">57</div>
<div style="width:550px;float:left;margin-left:40px;">
Try this one. By the way, I've added clearfix method too, as it is recommended to clear floating spaces when you are not floating anything anymore.
If you don't want them, you can remove the div with .clearfix and the CSS.
Here you go.
Looks like you've got the unholy duo of absolute positioning and float:left without a "clear". This means your first child div with those two children will have no height whatsoever. I recommend removing position:absolute and float:left from these divs, using instead:
display:inline-block;
vertical-align:top;
This will allow them to flow left -> right and have a height within the page flow.
I have a large text. I've made 3 columns with the following CSS:
.columns {
-webkit-column-count: 3;
text-align: justify;
}
It has to work in Safari. This works just fine. But now I would like to place an image to the top of the second column.
How can I have this result?
Edit: This was my start of doing the thing, but I would like to say that the important thing is to have the result in any way, so I can drop this css in case it can be solved without this.
Edit 2: I've solved it with the jquery colonizer plugin. I had to add 3-5 lines of code to the plugin. I need this for the iPad, where I have arrange the text and image like I mentioned before. I think this is the simplest method to have this job done.
In case you need the solution, feel free to e-mail me.
#flynfish, please post it as an answer, so I can accept it.
I'm not sure that this is possible. The browser determines where to break the content and there's no way via CSS to insert something at those points. The closest thing I've been able to come up with uses the column-break-before: property (-webkit-column-break-before, -moz-column-break-before, column-break-before).
For example:
CSS:
div#multicolumnElement {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.special {
-webkit-column-break-before:always;
-moz-column-break-before:always;
column-break-before:always;
}
HTML:
<div id="multicolumnElement">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis, lectus
nec tempor auctor, urna urna venenatis nisi, ac pellentesque est felis egestas lorem!
Duis lectus dui, commodo in varius sed, bibendum at eros. Donec ultricies, est quis
pretium porttitor, neque arcu auctor dui, sit amet adipiscing erat est id massa.
Morbi at elementum <img class="special" src="http://dummyimage.com/200x150/000/fff" />lectus. Donec fermentum massa sit amet nisi tempus sed vestibulum
tortor pellentesque. Aliquam dictum, sapien a luctus ultricies, ipsum erat dignissim
tellus, in ultricies mi lorem tempor velit. Vivamus ornare nulla sed arcu elementum
pharetra. </p>
<p>Phasellus cursus felis sed felis porta tempor. Vestibulum at eleifend ligula.
Vestibulum hendrerit ligula at elit lacinia at ultricies metus fringilla! Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi
ultrices tortor vel ipsum imperdiet imperdiet. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
eu leo quis lectus aliquet elementum. Aenean porta interdum nibh id posuere? Phasellus
nisl lorem, semper bibendum semper at, malesuada non odio. </p>
<p>In ullamcorper eros quis nisi pharetra tincidunt. Vestibulum ac elit nunc, sed
laoreet leo! Duis et nulla sit amet lorem gravida lacinia. Cras massa ipsum, semper
in mattis ut, fringilla in nisi. Nulla mauris urna, feugiat sed convallis id, facilisis
et sem. Donec egestas ultricies commodo. Aliquam eget nulla enim, et dictum nisi.
In faucibus, leo vitae congue convallis, elit eros venenatis leo, nec lobortis sapien
orci at nunc. </p>
</div>
This produces four columns of text with an image at the top of the second column, however depending on the amount of text and the space available, it's possible that this may not always turn out as you want.
I'd have linked to a jsFiddle example but it seems to be down ATM.