I want to show the title of some books in the page. Some title are short that can be show just in one line, and some are very long that will wrap to 2 lines.
Is it possible to set different styles (say: color, or line-height) for the 2 cases, just using CSS?
E.g. if the title is in one line, set the color to green. But if it's too long or user resize the window into smaller one, that it displayed in 2 lines, set the color to yellow?
I think this is impossible only with CSS. You need to use JavaScript in order to count characters or words in a line.
Another solution would be to use pseudo-element ::first-line http://www.w3schools.com/cssref/sel_firstline.asp
But that doesn't allow to change the whole paragraph style, only the first line, while the rest will have the main css.
To change the color of a text string of a certain length, I think you will have to find a jquery or javascript solution.
To add space (line-height) between the titles is much simpler. If each title is wrapped (e.g. in a div, h2, li, p), you could adjust the line-hight and add padding or margin to the surrounding element.
CSS example:
p.title { font-size: 11px; line-height: 12px; padding-bottom: 15px; }
HTML example:
<p class="title">Title 1</p>
<p class="title">Title 2 is a longer title - on two lines</p>
<p class="title">Title 3 is short</p>
If you need to check if the string is longer than the container div's width there is a topic here
