How to reduce letter spacing when text tries to wrap?

Question

Is there a way with CSS to reduce the letter spacing when the text tries to wrap?

For example, if I have a paragraph within a fixed width parent like so:

| Here is some |
| text         |

Is it possible, instead of wrapping the text to the next line, to reduce the letter spacing automatically to force it to fit without overflowing the parent div, like so:

DEMO HERE

i think this is what you want http://www.w3schools.com/cssref/tryit.asp?filename=trycss_anim_letter-spacing — rjdmello, Jun 19 '14 at 06:01
@rjdmello - I need to dynamically change the `letter-spacing` depending on whether the text is trying to wrap or not... Not animate my text. — Fizzix, Jun 19 '14 at 06:03
you may need to use jquery and do some thing like this http://jsfiddle.net/rCekh/3/ — rjdmello, Jun 19 '14 at 06:43
@rjdmello - Once again, the text needs to stay on one single line. — Fizzix, Jun 19 '14 at 08:03

score 0 · Accepted Answer · edited May 23 '17 at 12:21

0

I did some research and, as I expected, currently it isn't possible without javascript. If this isn't a problem for you check this answer: CSS text justify with letter spacing

edited May 23 '17 at 12:21

Community

1
1

answered Jun 19 '14 at 06:26

kbtz

12,311
8
48
69

score 0 · Answer 2 · answered Jun 19 '14 at 06:38

0

Try to use white-space set according to you.

white-space:nowrap and letter-spacing:-1px;

answered Jun 19 '14 at 06:38

user3302090

19
2

As stated in my question, this has to be automated. Not by applying a class to each individual block of text that I need to reduce the letter spacing on. – Fizzix Jun 19 '14 at 07:54

How to reduce letter spacing when text tries to wrap?

2 Answers2