View Single Post
Old 05-25-2013, 10:15 PM   #13
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,367
Karma: 20212733
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
I agree you can't quite do what you want. The only thing you could do is set your :first-line attribute and then have a minimum number of words (in this example 4) that would be emphasized regardless of the reader's support of the pseudo selector. If the font was so large - or the screen so small - that only 3 words fit on the first line, the 4th word would still be emphasized on the second line. But that would be a pretty extreme situation to only fit 3 words on a line.

eg.
CSS
h1 + p {text-indent:0}
h1 + p:firstline {font-style:italic}
em {font-style:italic}

HTML
<h1>Heading Line</h1>
<p><em>The first four words</em> are italic on non-supportive devices. The entire first line is italic on supportive devices.</p>

-OR-

h1 + p {text-indent:0}
h1 + p:firstline {font-variant:small-caps}
.smcap {font-variant:small-caps}

<h1>Heading Line</h1>
<p><span class="smcap">The first four words</span> are smallcaps on non-supportive devices. The entire first line is smallcaps on supportive devices.</p>
Turtle91 is offline   Reply With Quote