Когда я добавляю overflow:hidden
в span
, он слегка поднимается вверх. В чем причина?переполнение: проблема с выравниванием скрытых элементов
Пролет динамически в скрипкой - https://jsfiddle.net/afelixj/beqrzypy/1/
Я пытался скрыть точки с text-indent
и добавить стиль к span:before
.
ul{
margin: 0;
padding: 0;
width: 400px;
}
li{
display: inline-block;
list-style: none;
border: 1px solid #ccc;
margin: 0 4px 7px 0;
padding: 5px;
}
span{
cursor: pointer;
display: block;
overflow: hidden;
}
.holder{
position: relative;
}
.moreitems{
display: none;
position: absolute;
top: 30px;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
width: 200px;
}
.moreitems li{
display: block;
}
<ul>
<li>Lorem ipsum dolor</li>
<li>sit amet, consectetur</li>
<li>adipisicing elit</li>
<li>Reiciendis</li>
<li>ad minima om</li>
<li>velit expedita</li>
<li>impedit</li>
<li class="holder"><span>...</span><ul class="moreitems" style="display: none;"><li class="">ad minima om</li><li class="">velit expedita</li><li class="">impedit</li><li class="">laborum earum</li></ul></li>
</ul>
Каков наилучший способ стиль точки, как в ниже дизайне? У меня проблемы с использованием больших font-size
с менее line-height
.
Спасибо за отзыв. –
Ваше приветствие :) –