• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 765
  • Last Modified:

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

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?
Reece Dodds
Reece Dodds
2 Solutions
Kyle HamiltonData ScientistCommented:
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>
Actually you could try: ::first-line

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

Open in new window


You will just have to play with the sizing til its right.
Reece DoddsAuthor Commented:
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now