Make a text with overflow-x: Hidden move automatically

Asked

Viewed 63 times

0

I am fixing the width of the li and sending all the text that exceeds stay Hidden, now I would like to make the part of the text that this 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

Upshot:

inserir a descrição da imagem aqui

  • See if this is what you need https://answall.com/questions/11862/comor-fazer-um-marquee-sem-a-tag-marquee

  • It helped a lot, I got it applied, but now comes another problem, I want to put the animation of the movement only for those who are exceeding the allowed space, and I do not know how to do it

  • Expensive the easiest way I know would be to put a class to remove the animation in the larger texts. But if you want something dynamic you will need a Script to count how many characters the text has and whether it will put the animation or not... then I won’t know how to help you. But you can close this question and open another one with this problem, or else edit this and put the current code and asking the problem you have now.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.