How can I show dots in a span with hidden overflow

Question

My CSS     content right head span     display inline-block    width 180px    overflow hidden  important      Now it s showing content content  But I want to show like content content      I need to show dots after contents  Contents are coming dynamically from database

User · Answer

Well  the  text-overflow  ellipsis  worked for me  but just if my limit was based on  width   I has needed a solution that can be applied on lines   on the height  instead the  width    so I did this script   function listLimit  elm  line       var maxHeight   parseInt elm css  line-Height    line       while elm height    gt  maxHeight           var text   elm text            elm text text substring 0 text length-10   text elm text                     And when I must  for example  that my h3 has only 2 lines I do       h3   each function       listLimit    this   2       I dunno if that was the best practice for performance needs  but worked for me

User · Answer

Try this    truncate       display inline-block      width 180px      white-space  nowrap      overflow  hidden      text-overflow  ellipsis      add  truncate class to your element     EDIT   Above solution is not working in all the browsers  you can try following jQuery plugin with cross browser support    function             fn ellipsis   function              return this eachAsync               delay  100              bulk  0              loop  function  index                    var el     this                    if  el data  fullText       undefined                        el html el data  fullText                       else                       el data  fullText   el html                                        if  el css  overflow       hidden                         var text   el html                        var t     this cloneNode true                                            hide                                            css  position    absolute                                            css  overflow    visible                                            width  auto                                            height el height                                                                   el after t                        function width     return t width    gt  el width                            var func   width                      while  text length  gt  0  amp  amp  width                              text   text substr 0  text length - text length   25   100                           t html text                                                      el html t html                         t remove                                                          jQuery     how to call       content right head span   ellipsis

User · Answer

I think you are looking for  text-overflow  ellipsis in combination with white-space  nowrap  See some more details here

User · Answer

You can try this    x000D   x000D   classname  x000D      width 250px  x000D      overflow hidden  x000D      text-overflow ellipsis  x000D    x000D   x000D   x000D

User · Answer

Thanks a lot  sandeep for his answer   My problem was that I want to show   hide text on span with mouse click  So by default short text with dots is shown and by clicking long text appears  Clicking again hides that long text and shows short one again   Quite easy thing to do  just add   remove class with text-overflow ellipsis   HTML    lt span class  spanShortText cursorPointer   onclick  fInventoryShippingReceiving ShowHideTextOnSpan this    gt Some really long description here lt  span gt    CSS  same as  sandeep with  cursorPointer added    spanShortText     display  inline-block    width  100px    white-space  nowrap    overflow  hidden  important    text-overflow  ellipsis      cursorPointer     cursor  pointer      JQuery part - basically just removes   adds class cSpanShortText      function ShowHideTextOnSpan element        var cSpanShortText    spanShortText       var  el     element       if   el hasClass cSpanShortText            el removeClass cSpanShortText        else          el addClass cSpanShortText

User · Answer

If you are using text-overflow ellipsis  the browser will show the contents whatever possible within that container  But if you want to specifiy the number of letters before the dots or strip some contents and add dots  you can use the below function  function add3Dots string  limit      var dots    quot     quot     if string length  gt  limit             you can also use substr instead of substring     string   string substring 0 limit    dots            return string     call like add3Dots  quot Hello World quot  9    outputs Hello Wor     See it in action here  x000D   x000D  function add3Dots string  limit      var dots            if string length  gt  limit             you can also use substr instead of substring     string   string substring 0 limit    dots           return string       console log add3Dots  Hello  how are you doing today    10    x000D   x000D   x000D

User · Answer

For this you can use text-overflow  ellipsis  property  Write like this   x000D   x000D  span   x000D      display  inline-block  x000D      width  180px  x000D      white-space  nowrap  x000D      overflow  hidden  important  x000D      text-overflow  ellipsis  x000D    x000D   lt span gt Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s  when an unknown printer took a galley of type and scrambled it to make a type specimen book lt  span gt  x000D   x000D   x000D    JSFiddle

User · Answer

var tooLong   document getElementById  longText   value      if  tooLong length    gt  18               longText   css  text-overflow    ellipsis

[html] How can I show dots ("...") in a span with hidden overflow?

Examples related to html

Examples related to css