Make text with overflow-x: hidden move automatically

I'm setting the width of the li and sending all the text that exceeds is hidden, now I would like to make the part of the text that is hidden automatically move to appear on the screen.

HTML:

ul
      - @realties.each do |realty|
        li.tabs
          a href="#tab-#{realty.id}" #{realty.address.street} , #{realty.address.number}

Css:

ul
  li
    width: 150px
    a
      overflow-x: hidden
      width: inherit

Result: