CODEWITHSUNDEEP
javascriptcssline-breaks
Ty Morton
Ty Morton

Reputation: 733

Controlling Line Break Lengths

I'm trying to find a way to control how lines break in a menu listing, so that we don't wind up with a single word in the second line.

For example, I have a navigation menu that is 200px wide. One of the items is "City Development Reources & Plan." Natively, the line breaks like this:

City Development Resources &
Plan

What I want is a minimum number of words or characters to break, so that it looks more like this:

City Development
Resources & Plan

I'm not finding anything in pure CSS to manage that, and before I go down the javascript rabbit-hole, I was wondering if anyone had something already handy.

Thanks for any help,

ty

Upvotes: 3

Views: 83

Answers (2)

ClemSndr
ClemSndr

Reputation: 277

Unfortunately there is no way to do this with css only. You can either add the line break manually or write a javascript function to manage this.

Upvotes: 2

CRB
CRB

Reputation: 51

Since you have the fixed 200 width on the container, you can trick the browser using left-right padding, just measure it with the web inspector and add padding until breaks on a nice way.

Upvotes: 0

Related Questions