Clever Geek Handbook

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

+3


source to share


2 answers


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.



+2


source


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.



0


source






More articles:


All Articles