Allow text wrap in li menu - html

Question

I have a menu that I have created with an unordered list. The menu cannot go over 900px wide, so I need my menu li text to sit on top of each other. Without shrinking the text size to 8px, is there a way to 'text-wrap' my menu item so it fits all nicely in the little box?
#font-face {
font-family: KBDunkTank;
src:url(KBDunkTank.ttf)
}
ul {
/* margin: 20px 60px;*/
}
ul li {
display: inline-block;
height: 70px;
line-height: 70px;
width: 130px;
margin: 5px 0px 0 0;
text-indent: 15px;
position: relative;
font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: 500;
text-wrap: break-word;
text-shadow: 0 2px 2px black;
text-decoration:none;
}
ul li:before {
content: " ";
height: 0;
width: 0;
position: absolute;
left: -2px;
border-style: solid;
border-width: 35px 0 35px 40px;
border-color: transparent transparent transparent #fff;
z-index: 0;
text-decoration:none;
}
ul li:first-child:before {
border-color: transparent;
}
ul li a:after {
content: " ";
height: 0;
width: 0;
position: absolute;
right: -40px;
top: 0px;
border-style: solid;
border-width: 35px 0 35px 40px;
border-color: transparent transparent transparent #C34592;
z-index: 10;
text-decoration:none;
}
ul li.active a {
background: #FBE1EE;
z-index: 100;
text-decoration:none;
}
ul li.active a:after {
border-left-color: #FBE1EE;
}
ul li a {
display: block;
background: #C34592;
color: white;
text-decoration:none;
}
ul li a:hover {
background: #E899C9;
}
ul li a:hover:after {
border-color: transparent transparent transparent #E899C9;
}
#box{
width: 900px;
border-style: solid;
border-width: 5px;
}
<ul>
<li>Resume</li>
<li>Pick n Pack Game</li>
<li>Resume Rubric</li>
<li>Career Guru</li>
<li>Self Assessment</li>
<li>Submit</li>
</ul>
Image of what my menu looks like currently
Link to my menu on JSFiddle

Answer 1

Fixed it using 'word-wrap' and fiddled with the sizing of the borders and li for ages and finally got it...
ul.progressBar {
/* margin: 20px 60px;*/
}
ul.progressBar li {
display: inline-block;
height: 70px;
line-height: 30px;
width: 130px;
margin: 5px 5px 0 0;
/*text-indent: 20px;*/
position: relative;
font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
font-size: 16px;
font-style: normal;
font-variant: normal;
font-weight: 500;
word-wrap: break-word;
text-shadow: 0px 1px 1px black;
text-decoration:none;
text-align:center;
}
ul.progressBar li:before {
content: " ";
height: 0;
width: 0;
position: absolute;
left: -2px;
border-style: solid;
border-width: 30px 0 30px 40px;
border-color: transparent transparent transparent #fff;
z-index: 0;
text-decoration:none;
}
ul.progressBar li:first-child:before {
border-color: transparent;
}
ul.progressBar li a:after {
content: " ";
height: 0;
width: 0;
position: absolute;
right: -40px;
top: 0px;
border-style: solid;
border-width: 30px 0 30px 40px;
border-color: transparent transparent transparent #C34592; /*Pink: C34592*/
z-index: 10;
text-decoration:none;
}
ul.progressBar li.active a {
background: #FBE1EE;
z-index: 100;
text-decoration:none;
}
ul.progressBar li.active a:after {
border-left-color: #FBE1EE;
}
ul.progressBar li a {
display: block;
background: #C34592; /*Pink: C34592*/
color: black;
text-decoration:none;
padding-left: 30px;
}
ul.progressBar li a:hover {
background: #E899C9; /*Pink: E899C9*/
}
ul.progressBar li a:hover:after {
border-color: transparent transparent transparent #E899C9; /*Pink: E899C9*/
}
<ul class="progressBar">
<li>Resume<br><br></li>
<li>Pick n Pack Game</li>
<li>Resume<br>Rubric</li>
<li>Career<br>Guru</li>
<li>Self<br>Assessment</li>
<li>Submit<br><br></li>
</ul>