The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How Do I? : Control Line Breaks and Line Height in an list item in Responsive Layout Re: How Do I? : Control Line Breaks and Line Height in an list item in Responsive Layout


I’ve made some progress since the first post, but haven’t yet figured out the elegant approach to executing this.

Here’s the issue: As my layout responds to different display sizes, the width of the navigation list items grows, thereby changing the break point for multiple-word navigation items. I want to control the line breaks as the page grows.

In the past I’d be able to force a line break or div the poop out of it, but now I’m building a responsive site and am trying to use the most simple HTML I can. No breaks, no excessive divs was the original approach. My goal is an unordered list with no divs in the nav element.

This would be much easier if the client didn’t insist on the layout as it is (separate borders for the image and the nav copy). I want to deliver the same site she has now, with some nav style changes on the mobile queries, but exactly the same nav for desktop views.

After some work, I met at the point where my philosophy and my skills worked best and added some divs to the navigation. I made significant progress. (see I’m almost there, but as I fix one issue another pops up and I am indeed in search of some sage advice.

Do I add individual classes to each nav element and deal with their display state as they grow?

Am I correct that I cannot put a css border on a background image?

Should I try the new border-image property?

I could create different navs in HTML and show/hide them appropriately, but this seems excessive/redundant.