14

Is there any way purely with CSS (or 'proper' markup) to style the 2nd line of a paragraph when the text wraps to a second line? A well placed <br /> would do it, but I don't believe that's good markup or SEO.

Specifically, say I have a paragraph that is 2 lines long. I would like the 2nd line to have a wider width than the first line. So the paragraph is a little "pyramid-like". But I don't want to use anything that's not a proper way to do this just for beauty's sake.

Example:

<p>I am a very long 
sentence where my second line is longer.</p>
Joe Fletcher
  • 2,133
  • 4
  • 28
  • 33
  • Did you add that second paragraph to your question after I wrote my answer, or did I just not notice it? My current answer does not help you once you consider that second paragraph. – thirtydot May 13 '11 at 16:48
  • That was in the original question, but I think I need to clarify. I want the paragraph to be normal, i.e., no line breaks. so `

    I am a very long sentences....

    `. With the styling provided below, I can target first line with coloring successfully, but not width. I tried `width: 50%`, `width: 50px`, `margin-right:50px`, `padding: 30px` but it doesn't have an effect on the width.     – Joe Fletcher May 13 '11 at 17:47
  • 1
    I understand what you're after now (though it's still confusing :p), and I'm 99% sure that CSS can't do it alone. You'd have to use JavaScript. – thirtydot May 13 '11 at 17:51
  • 1
    Ok, you confirmed my theory then! ;) Can't be done. Will give up on this styling attempt. – Joe Fletcher May 13 '11 at 18:14
  • Yup, it makes sense to stick to CSS for things like this. If you're curious, the JavaScript would have been a *very* cut down version of this: http://jsfiddle.net/UGBXD/11/ / http://stackoverflow.com/questions/5529936/moz-background-inline-policy-on-webkit/5564206#5564206 – thirtydot May 13 '11 at 18:19

2 Answers2

29

You can use the :first-line pseudo-element:

See: http://jsfiddle.net/X33pY/ - resize the window to make a second line in the first paragraph.

p:first-line {
    color: red
}
p {
    color: blue
}

Just in case, this might be what you're after:

http://jsfiddle.net/qKRh8/

p {
    white-space: pre
}
Eric
  • 6,563
  • 5
  • 42
  • 66
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • 7
    Bear in mind that, as shown in the fiddle, "second line" does not refer to second line in HTML, as in HTML a newline is the same as a normal space character. "second line" refers to the second line as displayed on the browser. – BoltClock May 13 '11 at 16:45
  • @Bolt: Thanks. I cottoned on to that, and added an explanation sentence in my answer. – thirtydot May 13 '11 at 16:46
  • 4
    Note that you can't do box formatting with [`:first-line`](http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo): "The :first-line pseudo-element is similar to an inline-level element, but with certain restrictions. The following properties apply to a :first-line pseudo-element: font properties, color property, background properties, 'word-spacing', 'letter-spacing', 'text-decoration', 'text-transform', and 'line-height'. UAs may apply other properties as well." – robertc May 13 '11 at 17:36
  • 1
    Ah, that's what I was just realizing! I don't think any of those will help me shrink the first line width. – Joe Fletcher May 13 '11 at 17:49
1

You can use the :first-line pseudo-class to style the first line and, by implication, the second line will fall back to the default styling.

See:

http://www.w3.org/TR/CSS2/selector.html#pseudo-elements

ADW
  • 4,030
  • 17
  • 13