There is a menu. table-cell . Consists of 8 points. All the same width: calc(100% / 8); . In the last menu item, not 1 word as in all, but 2. And for this, the text goes to the second line, and under other items an empty space is created. Therefore, I think to make the last menu item overflow: hidden . And when you hover, what would the text move like a running line. How can I do that? or is there some other solution?

  • An example of text animation with a running line is? - soledar10
  • not. Well, it's standard that the text from right to left would move - Alex_01

2 answers 2

It seems to be so

 * { margin: 0; padding: 0; text-decoration: none; list-style: none; } li { width: 100px; height: 22px; line-height: 22px; margin: 5px 20px; overflow: hidden; } li a { display: inline-block; width: 350px; } li:hover a { animation: trey 5s infinite; } @keyframes trey { 100%{ margin-left: -300%; } } 
 <ul> <li> <a href="">Длинное меню из четырёх слов</a> </li> <li> <a href="">Очень длинное меню которое длинее предыдущего</a> </li> </ul>

  • I would replace from with 100% . Still, we read from left to right - vp_arth
  • fixed an example - user33274

Another option with translateX

 .menuItem { width: 100px; height: 30px; border: 1px solid #000; overflow: hidden; line-height: 30px; padding: 5px; position: relative; float: left; } .menuItem span { position: absolute; white-space: nowrap; transform: translateX(0); transition: 3s; } .menuItem:hover span { transform: translateX(calc(100px - 100%)); } 
 <div class="menuItem"> <span> Пример очень длинного описания пункта меню </span> </div> <div class="menuItem"> <span> Другой пример очень длинного описания пункта меню </span> </div>

  • one
    thank. I'll take a note!) - Alex_01