Overflow: problem with hidden element

Question

When I add overflow:hiddenin span, it moves slightly up. What could be the reason?

The space is dynamic in the script - https://jsfiddle.net/afelixj/beqrzypy/1/

I tried to hide the dots with text-indentand add a style to 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>

Run codeHide result

What is the best way to create dots, as in the bottom design? I have a problem using larger font-sizewith less line-height.

Answer 1

I used vertical-align: top;in li, please check the code below.

li{
  display: inline-block;
  list-style: none;
  border: 1px solid #ccc;
  margin: 0 4px 7px 0;
  padding: 5px;
  vertical-align: top;
}

Answer 2

Remove "span: block" from the range.