Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Force text to wrap

Tags:

css

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?

like image 470
zekia Avatar asked Feb 04 '14 13:02

zekia


2 Answers

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.

like image 179
Arkana Avatar answered Nov 18 '22 12:11

Arkana


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.

like image 31
Kuzgun Avatar answered Nov 18 '22 12:11

Kuzgun