Prevent Wrapping of Menu Items

Prevent wrapping of menu items

When you don't know the width because the links can differ in width you could use display: inline-block on the list item <li> and white-space:nowrap on the list itself <ul>

http://jsfiddle.net/Frd8J/

How to prevent in-line list from wrapping

The reason you are getting this is because each li is 20% wide + 1 px on each side for the border. You can fix this with a negative margin to compensate.

Add margin: 0 -1px; to the css selector ul.nice-menu li

prevent wrapping of block format UL pop-out menu items

In your #nav ul.subs > li class, you are setting side padding relatively with %.

Changing this to absolute value in px has fixed the problem - saved to your fiddle.

Prevent CSS Horizontal Drop-Down Menu from Wrapping

Add the following CSS:

#menu > ul { 
    white-space: nowrap;
}

#menu > ul > li {
  display: inline-block;
  float: none;
  margin: 0 -3px 0 0;
}

float: none is needed to override the rule #menu li { float: left; }, which causes the parent ul's white-space: nowrap rule to be ignored.

display: inline-block produces an inline layout for the list items, but still allows them to be treated like block elements with respect to sizing and positioning.

The negative margin-right is needed to override the default conversion of a linebreak in the HTML source to a single space; without it, your top-level menu items will have spaces between them.

display: inline-block doesn't work properly in IE7. A fix is described here:

to get inline-block working for any element in Internet Explorer simply add "zoom:1; *display: inline; _height: 30px;" to the end of that elements style oh and yes change the height to whatever you need.

How do I prevent Primefaces from wrapping between submenu text and triangle icon?

The fix for me wast remove the !important from the CSS rule; that way other rules could override it, in this case the regular Primefaces styles.

Stop element wrapping in bootstrap nav

You'll notice when the screen is larger than 768px bootstrap specific styles take into effect.

@media (min-width: 768px)
.navbar-right {
    float: right!important;
    margin-right: -15px;
}
@media (min-width: 768px)
.navbar-header {
    float: left;
}

You can change those in your own CSS (without overloading the vendor stylesheets) because of the way CSS works. As long as your stylesheet is linked AFTER bootstrap's your CSS rules will have a higher precedence than Bootstrap's. Meaning, your styles can override bootstrap's.

So you would just change these to:

Something like:

@media (min-width: 460px)
.navbar-right {
    float: right!important;
    margin-right: -15px;
}
@media (min-width: 460px)
.navbar-header {
    float: left;
}

https://jsfiddle.net/u10Lvgk8/2/

Polymer 1.0: How to stop paper-menu-items from wrapping their text?

This isn't exactly perfect but it should give you an idea of the kind of css properties you should change and how to do it: http://jsbin.com/xaladokimu/1/edit?html,output

What changed is the style:

<style>
  paper-menu-button{
    --paper-menu-button-dropdown:{
      max-width: 100%;
      right:70vw;
    };
  }
  paper-item{
    --paper-item:{
      white-space: nowrap;
      width: 100%;
    };
  }
</style>

Basically, you have to add the white-space: nowrap to the items so that their text is displayed in a single line and then play around with the items' width and the dropdown menu's horizontal position and width (trying to change the dropdown's position to fixed or something else could help too)

Then again, you should set this css properties outside of the element in some custom style (unless you want your element to only work on a set position)

Prevent menu list from wrapping

You need to set the width of your <ul> if you don't want it to wrap around.

ul
{
    width:820px;
}

To center the text, set line-height to the same as height

a:link,a:visited
{
    line-height: 60px;
}

jsFiddle

---

Related Topics