CODEWITHSUNDEEP
csspaddingline-breakspseudo-element
Dan
Dan

Reputation: 11

css to format line 1 and 2 of my h1 differently? & change position of line break

Hi I am using a featured post widget in wordpress and its is displaying my h1 heading over 2 lines. However I want to change the margin or line breaks so that instead of saying "Workplace Injury" on the first line and "Prevention" on the second line, It would say "Workplace" on the first line and "Injury Prevention" on the second

Any ideas. I've tried using a psuedo first line command but no luck ie.

#home-header-right .featuredpage .post-7  h2:first-line,
#home-header-right .featuredpage .post-20  h2:first-line, 
#home-header-right .featuredpage .post-7  a:first-line,
#home-header-right .featuredpage .post-20  a:first-line  {
    padding: 0 50px 0 0;
}

Upvotes: 1

Views: 1004

Answers (2)

Jordan Gray
Jordan Gray

Reputation: 16499

If you want to break the text on the first word, I recommend you just wrap it in another element:

<h1><span>Workplace</span> Injury Prevention</h1>

h1 span {
    display: block;
}

Example: http://dabblet.com/gist/1714493

The additional element is non-semantic, but less so than a hard-coded <br>, and more reliable than trying to mess with the :first-line pseudo-element.

Edit: If you can't use HTML in post titles and don't mind using a bit of jQuery, you could dynamically wrap the text like so:

(function($) {
    $('h1:contains(Workplace Injury Prevention)')
        .html(function(i, html) {
            return html.replace('Workplace', '<span>Workplace</span>');
        });
    ;
})(jQuery);

Example: http://jsfiddle.net/deZKd/

To do this for other post titles, you will want something more generic:

(function($) {
    $('h1')
        .html(function(i, html) {
            return html.replace(/^(\w+)\b/, '<span>$1</span>');
        });
    ;
})(jQuery);

Example: http://jsfiddle.net/deZKd/1/

(Bear in mind that in both these examples, you will want to change the selector to match only post headings within the widget, e.g. #recent-posts-widget h1:contains(…).)

Upvotes: 0

animuson
animuson

Reputation: 54729

The selection of text that is selected by :first-line is an inline-level block of text and cannot have padding and margin applied to it. You could try setting display: block on it to see if it works, but as far as the W3C Wiki goes, you can only use the following CSS properties on that text:

  • font properties, color, background properties, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, and line-height

Upvotes: 2

Related Questions