css psuedo similar to :first-letter to change size of first word

Posted on 2012-08-22
Last Modified: 2012-08-23
On a site I'm building using wordpress as the CMS, the site title has two words (Wingham Motel).
I want the word "Wingham" to appear on top of the word "Motel" which is easy enough to do, I just limit the width of the DIV and specify line height to suit.
What I'd like to do though, is make the top word (which has more letters) shrink to be the same width of the bottom word.
Easy enough to do if one was in a span, but, the words are pulled in from the wordpress database  <?php bloginfo('name'); ?>.
I was hoping there was something like the :first-letter pseudonym to achieve this...

Any suggestions?
Question by:Reece Dodds
    LVL 25

    Expert Comment

    by:Kyle Hamilton
    You would have to use javascript for this.

    Are you using jquery on your site? what is the markup of the phrase?

    something like this?
    <h2 class='title'>Wingham Motel</h2>
    LVL 30

    Accepted Solution

    Actually you could try: ::first-line

    h2.title::first-line{width:/*specify width here*/;}

    Open in new window

    LVL 58

    Assisted Solution


    You will just have to play with the sizing til its right.
    LVL 7

    Author Closing Comment

    by:Reece Dodds
    Perfect!  because I've only got two words, and it will be two lines, I just used :first-line

    .site-name {
          padding:60px 0 0 15px;
          margin:0px 0px 10px 0;
          font-family:"Arial Black", Gadget, sans-serif;

    .site-name:first-line {

    I'm going to keep note of your link Gary in case I need it for other sites.
    Cheers all

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now