Show hidden text on hover with animation

I have the following structure: HTML: <ul> <li> <span>asd</span> adsafsadlvjnsd </li> </ul> CSS: span { width: 0; } li:hover span { width: 60px; } This means that the content in the span is initially hidden but shown when the item is hovered, currently if the content on the li is too big it simply pushes the content down, is there a way to only push as much content as necessary? I tried using word-break but that didn't seem to work. Also, I want to have the slide animation when hovering.