- This topic is empty.
February 21, 2013 at 11:52 am #42904
http://jsfiddle.net/TourKick/DSy5y/1/ demonstrates that word-wrap:break-word; does the trick with a long string of text.
However, if you use something like an icon font and set the font-size:2000px; (of the icon/span), it technically is 1 character, not a string of characters and so I’m curious how to say “I don’t care if you WANT to be 2000px, you cannot be bigger than the container’s width.” (lol, I’m talking to icons… help me!)
Example with a 2000px icon font with word-wrap:break-word; taking no effect is here: http://pagelinestheme.staging.wpengine.com/icon-font-shortcode#demo
Thank you.February 21, 2013 at 11:54 am #125565
>2000px icon font
Edge-use much?February 21, 2013 at 12:02 pm #125567February 21, 2013 at 12:03 pm #125568
Extreme example but looking to learn the principle still.
Is it possible to control (purely with CSS)?February 21, 2013 at 12:06 pm #125571
I can’t see how….if you are using an icon-font…it needs to fit into a certain element which should be sized appropriately for it.
I am having trouble thinking of a reason NOT for this to be the case.February 22, 2013 at 8:34 am #125681
Maybe this will help you consider the value of “responsive icon font icons”:
3 icons that are nice and big for large browser windows but don’t scale when the window is resized: http://screencast.com/t/bVF2qcroK (short video)
The solution would be the same whether the icon’s font-size is 300px or 2000px (or %, em, etc).
As far as I know, it’s not possible (via LESS/CSS) because if you go to any webpage and change the font-size to 2000px, all the letters in that paragraph will wrap, but they’ll also be wider than their container (e.g. a 2000px letter “W” is not going to stay within the 900px page width).February 22, 2013 at 9:12 am #125683
I haven’t reviewed the video yet (on phone) but my initial thought is ‘Shouldn’t one choose an icon font that scales UP’?
I guess what I’m saying is’ mobile first?’
An icon over say 24px seems unnecessary.February 22, 2013 at 9:51 am #125687
Looked at the video…without sound it doesn’t mean much to me.
Frankly, aren’t media queries the answer?February 22, 2013 at 12:18 pm #123210dgrieselParticipant
Just an idea, browser support will be crappy, but take a look at [viewport relative units](https://css-tricks.com/viewport-sized-typography/ “”).
could do the trickFebruary 24, 2013 at 2:50 pm #125821
Cool. Thanks for the heads up. Never heard of that before.
- The forum ‘CSS’ is closed to new topics and replies.