How to move text on new line?

People question easy, but Chet does not quite get can. There is a vertical menu
<nav class="widget_my_nohome">
 <ul class="widget-list_my_nohome widget-list_my_nohome-no-home">
 the <li><a href class="is-active"><span>Home</span></a></li>
 the <li><a href><span>textiles</span></a></li>
 the <li><a href><span>Gadgets</span></a></li>
 the <li><a href><span>Office</span></a></li>
 the <li><a href><span>Travel, leisure, sports</span></a></li>
 the <li><a href><span>Printing products, Upakovka </span></a></li>
 the <li><a href><span>Products to order</span></a></li>
 the <li><a href><span>Gift sets</span></a></li>
 the <li><a href><span>application</span></a></li>
 the <li><a href><span>Contacts</span></a></li>
</ul>
</nav>


(sass)
.widget_my_nohome
 padding: 20px 30px
 //background: white
 font-family: 'Roboto', sans-serif
 position: fixed
 top: 20.5%

.widget-title_my_nohome
 text-transform: uppercase
 letter-spacing: 2px
 color: #fff
 font-size: 16px
 padding-left: 15px
 margin-bottom: 15px
 border-left: 2px solid #6dcff6

.widget-list_my_nohome
 list-style: none
 padding: 0
&:before
 content: ""
 position: absolute
 top: 40px
 left: 29.45 px
 bottom: 60px
 width: 1px
 background: #fff
 background: rgba(255,255,255,0.5)
li
 line-height: 3.5 em
a
 text-decoration: none
 display: block
 font-family: 'Noto Sans', sans-serif
 color: #fff
 font-weight: 600
 font-size: 16px
 width: 300px
 height: 56px
&:before
 content: ""
 display: inline-block
 background: #fff
 width: 11px
 height: 11px
 left: -6px
 position: relative
 border-radius: 50%
 margin-right: .5em
span
 opacity: 0
&:hover
span
+mt(.5s)
 opacity: 1
.is-active
&:before
 content: ""
 display: inline-block
 background: #fff
 width: 17px
 height: 17px
 left: -9px
 top: 2px
 position: relative
 border-radius: 50%
 margin-right: .5em
span
 opacity: 1


but damn "Printing products packing" too long sentence and should be placed on a new line, but she moved with incredible width and I don't understand why ?
5afbaa1522623261818114.png

I understand that overcomplicated but where exactly I do not understand. Prompt )
June 5th 19 at 21:53
2 answers
June 5th 19 at 21:55
Solution
but she moved with incredible width and I don't understand why ?

li
 line-height: 3.5 em
June 5th 19 at 21:57
Solution
.widget_my_nohome li{
 line-height: the value here;
}


and span make

span{
display:block;
}

Find more questions by tags CSSHTML