How to capitalize first line with CSS? ::first-line pseudo-element not working

问题

Right now I've got a paragraph and I'd like to capitalize the entire first line. I've set the first paragraph to an ID "firstp" and tried:

#firstp::first-line {
  text-transform: uppercase;
}

I've tried it with text-transform: capitalize but that doesn't work either. It's strange because I've managed to change the first letter (changed font size) using #firstp:first-letter.

回答1:

text-transform on :first-line is really buggy right now, see the reference here http://reference.sitepoint.com/css/text-transform

You can use this jquery plugin called linify https://github.com/octopi/Linify to select the first line and then apply the property of text-transform: uppercase

Regards,

回答2:

I think Chrome has a problem with ":first-line". Try removing that and using james31rock's syntax on this page, except in his example the CSS should be "#firstp{..." to reflect the ID in his HTML rather than ".makeupper".

回答3:

In order to accomplish this you must use the following Pseudo-element within the correct syntax. Example:

HTML PORTION:

<selection id="Welcome">
<p>Some text</p>
</section>

CSS SHEET:

#Welcome p:first-of-type:first-line {
text-transform: uppercase;
}

I hope this helps. Sorry for the late entry. I guess, better late than never!

回答4:

There might be another way ...

What if you have two spans with text inside paragraph, one of the spans would have position set to upper left corner of the paragraph, so the two spans would overlap. Now set height of the upper span to about line-height of your text and overflow to hidden so only first line of the span would be visible. Set text-transform to uppercase on the upper span and vou la you have first line in uppercase.

Downside of this solution is, uppercase text is wider so there might be missing words on next line. You can fix this by using fixed-width font or try to set letter-spacing on both spans so width of uppercase and lowercase texts would be same.

Here is jsFiddle, though it's not ideal sometimes when you change the window size, it might be sufficient.

回答5:

It doesnt seem to work either way, in Chrome. In I.e. text-transform works. I do not have firefox to test with.

http://jsfiddle.net/vJSeq/4/ - using text-decoration

http://jsfiddle.net/vJSeq/3/ - using text-transform

You can see that the selector is right because it is highlighted.

My suggestion would be to use something to seperate the text you want highlighted, by creating a span tag inside of the paragraph and assign it a class

<p id="firstp">to stop the degradation of the planet's natural environment and to build a future in <span class="makeupper">which humans live in harmony with nature, by; conserving</span> the world's biological diversity, ensuring that the use of renewable natural resources is sustainable, and promoting the reduction of pollution and wasteful consumption.</p>

and the css

.makeupper
{
  text-transform: uppercase;  
}

http://jsfiddle.net/vJSeq/5/

回答6:

You might want to use:

font-variant: small-caps;

It looks better in my opinion and is supported in all major browsers.

More info

http://en.wikipedia.org/wiki/Small_caps

来源：https://stackoverflow.com/questions/11808992/how-to-capitalize-first-line-with-css-first-line-pseudo-element-not-working

标签

css

css-selectors

line

pseudo-element

capitalize