2

I have a flexslider carousel and it appears that for the items not yet in view dotdotdot is not applied correctly to some of them, there appears to be a text after the ...

http://dusit.syndacast.com/dusitthani/bangkok/

enter image description here

If I resize the window then it adjusts and works as the items are in the window view. Not sure why it happens for one but not another.

I am using the watch:true called straight after the flexslider loads.

I found one solution from another thread but not sure how to apply it to flex.

jquery dotdotdot plugin (adds ellipsis) not working with Bootstrap carousel

Thank you!

Community
  • 1
  • 1
user2760338
  • 235
  • 1
  • 4
  • 13
  • This does not appear to be happening on my browser google chrome, what browser are you viewing the page on? You could always add this to the element : `text-overflow: ellipsis;` – Spade Jun 25 '15 at 19:59
  • Using chrome too on windows. Your solution seems to work well but there's a
    in the content which puts a ... after that and after the end of the content because of 'white-space: nowrap;'     – user2760338 Jun 25 '15 at 20:07

1 Answers1

0

Try this:

<div>hello world this is a long text</div>
<style>
div{
    width:50px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
</style>
Khalid
  • 194
  • 1
  • 1
  • 7
  • Thank you but I can't set a width, this solution only works for one line unfortunately, multi lines it doesn't show the ... at the end, I would have loved to use this solution otherwise. – user2760338 Jun 25 '15 at 20:46