Как перенести текст на новою строку?

Question

[wowastrom]

Народ вопрос изи, но чёт никак вкурить не могу. Есть вертикальное меню

<nav class="widget_my_nohome">
					  <ul class="widget-list_my_nohome widget-list_my_nohome-no-home">
					    <li><a href="" class="is-active"><span>Главная</span></a></li>
					    <li><a href=""><span>Текстиль</span></a></li>
					    <li><a href="" ><span>Гаджеты</span></a></li>
					    <li><a href=""><span>Офис</span></a></li>
					    <li><a href=""><span>Путешествия, отдых, спорт</span></a></li>
					    <li><a href=""><span>Полиграфическая продукция, упаковкаn </span></a></li>
					    <li><a href=""><span>Изделия под заказ</span></a></li>
					    <li><a href=""><span>Подарочные наборы</span></a></li>
					    <li><a href=""><span>Услуги по нанесению</span></a></li>
					    <li><a href=""><span>Контакты</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.45px
		bottom: 60px
		width: 1px
		background: #fff
		background: rgba(255,255,255,0.5)
	li
		line-height: 3.5em
	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

но блин " Полиграфическая продукция, упаковка " слишком длинная фраза и должна переноситься на новую строку, но она переносится с нереальной шириной, и я не понимаю почему ?


Я понимаю, что перемудрил но где именно не понимаю. Подскажите плиз )

Answer 1

[Максим Тимофеев]

но она переносится с нереальной шириной, и я не понимаю почему ?

li
    line-height: 3.5em

Answer 2

[Юпитер Макс]

.widget_my_nohome li{
    line-height: тут значение;
}

и span сделайте

span{
    display:block;
}