Controlling line break length
I'm trying to find a way to control how lines break in a menu list so that we don't end up with one word on the second line.
For example, I have a navigation menu that is 200px wide. One of the items is "Reform and city development plan". At the root, the line breaks like this:
City Development Resources and Plan
What I want is the minimum number of words or characters that need to be broken for it to look like this:
City development and resources and plan
I don't find anything in pure CSS to handle this, and before I went down the javascript crosshole I was wondering if anyone has something already handy.
Thanks for any help,
ty
Unfortunately, there is no way to do this with just css. You can either add the line break manually or write a javascript function to control this.
Since you have a fixed width of 200 on the container, you can trick the browser into using left-right padding, just measure it with the web inspector and add padding before ending the conversation.