Geek Answers Handbook

Styling the first line in the last paragraph using css

How to make the first sentence in the last paragraph bold using css? I also want to add an extra addition to the top of this last paragraph so that it wraps around the image. If I increase the registration at the bottom of the floating image, this paragraph is not transferred to the lower left edge of the image, it just flows along the right side - not what I want. I attached the class to the "p" element, since I only want to execute a specific paragraph (and I do not see the ": last-child" pseudo-element, and I do not know if you can use two pseudo-elements per element or class).

#wf_mainContent_left p.last_wfp:first-line {
padding-top:20px;
font-weight:bold;
color:red;
}

HTML

<p class="last_wfp">This is the first sentence that I want bold and red. This is the second
 sentence that I don't want that treatment.</p>

This highlights both sentences when I want only the first sentence, even if they are on the same line. This should be done in accordance with this tutorial . And there is no effect on the gasket. I tried adding a tag <br>, but it adds a lot of space. And I tried styling the tag <br>, but that is not possible according to this post I just read. Anyway, I just want the first line to be bold, and not both sentences.

+5
source share
3 answers

@BoltClock has CSS answers.

If you are looking for cross-browser compatibility and want to use js, you can do the following:

CSS

.last_bold{
    font-weight:bold;
    color:red;
    padding-top:2em;
    display:inline-block;
}


var a = $('.last_wfp').text();
var b = a.split('. ');

$('.last_wfp').html('<span class="last_bold">' + b[0] + '</span>' + '. ' + b[1]);

Strike>

EDIT

mr.nicksta:

? , .

, # .

var a = $('.last_wfp').text();
var b = a.slice(0, a.indexOf('. '));
var c = a.slice(a.indexOf('. '), a.length);

$('.last_wfp').html('<span class="last_bold">' + b + '</span>' + c);

: http://jsfiddle.net/jasongennaro/3ZKP9/5/

+1

( ": last-child", , )

:last-child - - CSS3. , :first-line .

, :

#wf_mainContent_left p:last-child:first-line {
    padding-top:20px;
    font-weight:bold;
    color:red;
}

, CSS.

br, , , line-height p.

+3

More articles:


All Articles