Разрешить перенос текста в меню li

Question

У меня есть меню, которое я создал с неупорядоченным списком. Меню не может превышать ширину 900 пикселей, поэтому мне нужно, чтобы текст меню li сидел поверх друг друга. Не уменьшая размер текста до 8px, есть ли способ «text-wrap» моего пункта меню, чтобы он хорошо вписывался в маленькую коробку?

@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; 
 
\t font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif; 
 
    \t font-size: 12px; 
 
    \t font-style: normal; 
 
    \t font-variant: normal; 
 
    \t font-weight: 500; 
 
\t text-wrap: break-word; 
 
\t text-shadow: 0 2px 2px black; 
 
\t 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; 
 
\t text-decoration:none; 
 
} 
 

 
ul li:first-child:before { 
 
    border-color: transparent; 
 
} 
 

 
ul li a:after { 
 
    content: " "; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    right: -40px; 
 
\t top: 0px; 
 
    border-style: solid; 
 
    border-width: 35px 0 35px 40px; 
 
    border-color: transparent transparent transparent #C34592; 
 
    z-index: 10; 
 
\t text-decoration:none; 
 
} 
 

 
ul li.active a { 
 
    background: #FBE1EE; 
 
    z-index: 100; 
 
\t text-decoration:none; 
 
} 
 

 
ul li.active a:after { 
 
    border-left-color: #FBE1EE; 
 
} 
 

 
ul li a { 
 
    display: block; 
 
    background: #C34592; 
 
\t color: white; 
 
\t text-decoration:none; 
 
} 
 

 
ul li a:hover { 
 
    background: #E899C9; 
 
\t 
 
} 
 

 
ul li a:hover:after { 
 
    border-color: transparent transparent transparent #E899C9; 
 
\t 
 
} 
 

 
#box{ 
 
\t width: 900px; 
 
\t border-style: solid; 
 
    border-width: 5px; 
 
}

<ul> 
 
    <li><a href="#">Resume</a></li> 
 
    <li><a href="#">Pick n Pack Game</a></li> 
 
    <li><a href="#">Resume Rubric</a></li> 
 
    <li><a href="#">Career Guru</a></li> 
 
    <li><a href="#">Self Assessment</a></li> 
 
    <li><a href="#">Submit</a></li> 
 
</ul>

Image of what my menu looks like currently

Link to my menu on JSFiddle

Answer 1

Fixed его с помощью 'перенос слов' и возился с калибровкой границ и линейны на века и, наконец, получил его ...

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; 
 
\t font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif; 
 
    \t font-size: 16px; 
 
    \t font-style: normal; 
 
    \t font-variant: normal; 
 
    \t font-weight: 500; 
 
\t word-wrap: break-word; 
 
\t text-shadow: 0px 1px 1px black; 
 
\t text-decoration:none; 
 
\t text-align:center; 
 
\t 
 
} 
 

 
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; 
 
\t 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; 
 
\t top: 0px; 
 
    border-style: solid; 
 
    border-width: 30px 0 30px 40px; 
 
    border-color: transparent transparent transparent #C34592; /*Pink: C34592*/ 
 
    z-index: 10; 
 
\t text-decoration:none; 
 
} 
 

 
ul.progressBar li.active a { 
 
    background: #FBE1EE; 
 
    z-index: 100; 
 
\t text-decoration:none; 
 
} 
 

 
ul.progressBar li.active a:after { 
 
    border-left-color: #FBE1EE; 
 
} 
 

 
ul.progressBar li a { 
 
    display: block; 
 
    background: #C34592; /*Pink: C34592*/ 
 
\t color: black; 
 
\t text-decoration:none; 
 
\t padding-left: 30px; 
 
} 
 

 
ul.progressBar li a:hover { 
 
    background: #E899C9; /*Pink: E899C9*/ 
 
\t 
 
} 
 

 
ul.progressBar li a:hover:after { 
 
    border-color: transparent transparent transparent #E899C9; /*Pink: E899C9*/ 
 
\t 
 
}

<ul class="progressBar"> 
 
    <li><a href="#">Resume<br><br></a></li> 
 
    <li><a href="#">Pick n Pack Game</a></li> 
 
    <li><a href="#">Resume<br>Rubric</a></li> 
 
    <li><a href="#">Career<br>Guru</a></li> 
 
    <li><a href="#">Self<br>Assessment</a></li> 
 
    <li><a href="#">Submit<br><br></a></li> 
 
</ul>