Text isn't wrapping inside UL LI A
css, umbraco, word-wrap
Solution
You have `white-space: nowrap;` in your `#subNavigation ul li`, which will be inherited by your `p`.
Changing it to `white-space: normal;`, or adding `white-space: normal;` to the `p` or `a` should solve your problem.
Problem
I have an XSLT script to output a simple vertical menu, however on a couple of my links the text is not wrapping and I have no idea why! Have tried to put a DIV inside the link, as well as a to contain the text but to no avail. Anybody had this kind of issue before? XSLT: ``` <xsl:template match="/"> <xsl:variable name="items" select="$currentPage/ancestor-or-self::* [@isDoc and @level = 2]/* [@isDoc and string(umbracoNaviHide) != '1']"/> <!-- The fun starts here --> <div id="subnavtitle"> <xsl:value-of select="$currentPage/@nodeName" /> </div> <xsl:if test="count($items) > 0"> <ul> <xsl:for-each select="$items"> <li> <xsl:if test="@id = $currentPage/@id"> <xsl:attribute name="class">current</xsl:attribute> </xsl:if> <xsl:if test="@id = $currentPage/../@id"> <xsl:attribute name="class">current</xsl:attribute> </xsl:if> <a href="{umbraco.library:NiceUrl(@id)}" > <p style="width: 100px;"> <xsl:value-of select="translate(@nodeName,' ',' ')"/> </p> </a> </li> </xsl:for-each> </ul> </xsl:if> </xsl:template> ``` CSS: ``` #subNavigation { padding-top: 10px; padding-right: 10px; padding-left: 10px; font-weight: bold; font-size: 12px; background-size: 100% auto; margin: 0px; } #subNavigation ul { margin: 0; padding: 0; border: 0; outline: 0; } #subNavigation ul:after { content: "."; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } * html #subNavigation ul { zoom: 1; } *:first-child + html #subNavigation ul { zoom: 1; } #subNavigation ul li { list-style-image: none; list-style-type: none; margin-left: 0px; white-space: nowrap; display: inline; float: left; background: url(Designit_Green/images/nav.png) repeat-x; margin-bottom: 10px; width: 150px; } #subNavigation li.current { background: #FFF url(Designit_Green/images/nav-item-activeXXX.png) left top repeat-x; } #subNavigation li.current a:hover { background: #FFF url(Designit_Green/images/nav-item-activeXXX.png) left top repeat-x; } #subNavigation li.current a { color: #333; } #subNavigation li:last-child { border: none; } #subNavigation a:link, #subNavigation a:visited { padding-left: 15px; padding-right: 0px; padding-top: 10px; padding-bottom: 10px; color: #FFF; display: block; text-decoration: none; } ``` You can take a look at the result here: http://bellstest.info/bar-restaurant.aspx The Issue is with the left hand navigation.