5

This is my website's main menu:

enter image description here

As you you'll notice, the text inside main menu's items isn't wrapping. I've tried many solutions suggested but nothing seems to affect these items. Here's the css code:

#pt_custommenu .parentMenu a{
    width: 100px; height: 59px;
    line-height: normal;
    padding-top: 0; padding-bottom:0; 
    float:left;
    display: inline-block;
    position: relative;
    text-transform: none;
    word-wrap: normal;
    white-space: normal !important;
}

I'd like to make text break into two lines, like it would normally do, since the <a> element has a standard width and height.

Any suggestions?

zekia
  • 4,527
  • 6
  • 38
  • 47
  • Consider adding a partial snapshot of your website page to this question rather than a link, so it will be useful for future reference. – Jeff Bauer Feb 04 '14 at 14:05

2 Answers2

6

Remove &nbsp;

This code inserts a space without wrap. Normal spaces don't do that.

You can retrieve more info about here: http://www.sightspecific.com/~mosh/www_faq/nbsp.html

EDIT: I'm going to copy the relevant info in case this link someday dissappears:

&nbsp; is the entity used to represent a non-breaking space. It is essentially a standard space, the primary difference being that a browser should not break (or wrap) a line of text at the point that this   occupies.

Many WYSIWYG HTML editors insert these   entities in an effort to control the layout of the HTML document. For example, such an editor may use a series of non-breaking spaces to indent a paragraph like this:

<p>
    &nbsp; &nbsp; &nbsp; This first line of text is supposed to be indented. However, many browsers will not render it as intended.
</p>

[...]

There are some times when it is "acceptable" or "advisable" to use the   entity so long as the consequences are understood:

Its intended use of creating a space between words or elements that should not be broken. The only problems that can be associated with this use is that too many words strung together with non-breaking spaces may require some graphical browsers to show horizontal scrollbars or cause them to display the text overlapping table borders.

Arkana
  • 2,831
  • 20
  • 35
  • That's interesting (and weird!) but I can't see any ' ' inside menu items. There are just normal spaces there. (checked it using firebug ad firefox code view) – zekia Feb 04 '14 at 13:37
  • 2
    @ktsixit Edit the span element as HTML, you'll notice it looks like: `Machinery & Components` – Hashem Qolami Feb 04 '14 at 13:39
  • 1
    It's visible only using Chrome's Developer Tools. You're right. The item's content comes from database (this is a magento e-shop). Let me check how it's stored in there. – zekia Feb 04 '14 at 13:46
  • I checked database and... I have no idea where they come from, they're not visible in phpmyadmin anyway. I just used php str_replace to replace them with normal spaces. Thank's a lot for your help, I could never find this my self... – zekia Feb 04 '14 at 14:08
  • You're welcome, I'm glad to help :) It's very difficult to notice the issue if the content is delivered from DB. – Arkana Feb 04 '14 at 15:48
5

You want text to be broken so use following:

word-wrap: break-word;

I checked again and saw you didn't use any spaces, thats why it can't. Replace &nbsp; with normal space character. Otherwise browser will read it as a block without spaces.

Kuzgun
  • 4,649
  • 4
  • 34
  • 48
  • 1
    I've tried that but it makes words split in half. I'd like to have line breaks only in 'spaces'. – zekia Feb 04 '14 at 13:31