- This topic is empty.
-
AuthorPosts
-
April 29, 2013 at 10:03 am #44431
fooman
ParticipantI’m doing a site and the design has a lot of one-line justified text sections. It’s kinda important to keep it this way I guess.
Just curious, is there a way to do this or fake it without using images?
Text-align: justify; doesn’t do anything with single-line sections.
Using pixel-values for font-size isn’t reliable from browser to browser.Anyone have any guidance?
April 29, 2013 at 10:05 am #133500Paulie_D
Moderator>one-line justified text sections
Even if it’s just two words?
That sounds pretty awful.
>It’s kinda important to keep it this way I guess.
Is it…have you checked?
April 29, 2013 at 10:28 am #133507Merri
ParticipantYou can hack it like this:
h1 {
height: 1.5em;
line-height: 1.5em;
text-align: justify;
text-align-last: justify;
}h1:after {
content: ”;
display: inline-block;
width: 100%;
}I guess this is the easiest way to get the effect. Hard limits it to one line though. I don’t have time to verify how wide the browser support status is, but text-align-last is IE6+ I think. There are also other browser vendor specific properties, but I can’t recall those from the top of my head. Mobile web limits my search-ability right now.
April 29, 2013 at 11:33 am #133513Merri
ParticipantAh, that way. No CSS way, but you can push some JavaScript to do it: http://codepen.io/Merri/pen/dquki
Someone else is probably able to shorten the jQuery code.
April 29, 2013 at 1:50 pm #133527Merri
ParticipantIn this case magic numbers could be poison as not everyone may have the intended font. So I’d say do what you can with CSS (`text-align: center;`) and then throw JavaScript for those who support it (the vast majority).
Images could be other alternative that isn’t mentioned yet, but that would require more work. It is quite easy to give `width: 100%;` to images and have them scale. All the rest isn’t that easy.
April 29, 2013 at 2:57 pm #133534wolfcry911
Participantperhaps this would work:
October 14, 2013 at 1:21 pm #152995noahblon
ParticipantFantastic tip Merri!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.