Как исправить сжимание текста в span?
У меня есть вот такая структура:
<li class="item">
<a href="#" class="link" title="Главная">
<span class="span-menu">ГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавная</span>
</a>
</li>
Я хочу увести в троеточие длинный текст, для этого оборачиваю его в span и задаю следующие свойства:
.span-menu {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
height: 100%;
}
Но текст перекрывается сверху, и не выводится полностью.
Весь код:
.link {
box-sizing: border-box;
display: flex;
align-items: center;
height: 70px;
padding: 15px;
text-decoration: none;
color: #B7B7B7;
font-family: Open Sans;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 1.2%;
text-transform: uppercase;
border-bottom: 2px solid rgba(242, 242, 242, 0.10);
transition: .2s;
}
.item {
overflow: hidden;
}<ul>
<li class="item">
<a href="#" class="link" title="Главная">
<span class="span-menu">ГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавная</span>
</a>
</li>
<li class="item">
<a href="#" class="link" title="............">............</a>
</li>
<li class="item">
<a href="#" class="link" title="............">............</a>
</li>
<li class="item">
<a href="#" class="link" title="............">............</a>
</li>
<li class="item">
<a href="#" class="link" title="............">............</a>
</li>
</ul>