Limit characters displayed in span

Question

Is there some sort of way within HTML or CSS to limit the characters displayed with a span  I use a repeater that displays these info boxes and I want to limit the characters to the first 20 characters and if the input has more  then just concatenate  The box is like image shown     My code for this is    lt span class  claimedRight  maxlength  20  gt    item provider    lt  span gt

User · Answer

Yes  sort of   You can explicitly size a container using units relative to font-size    1em    the horizontal width of the letter m  1ex    the vertical height of the letter x  1ch    the horizontal width of the number 0    In addition you can use a few CSS properties such as overflow hidden  white-space nowrap  text-overflow ellipsis  to help limit the number as well

User · Answer

You can use the CSS property max-width and use it with ch unit  And  as this is a  lt span gt   use a display  inline-block   or block      Here is an example      lt span style     display inline-block    white-space  nowrap    overflow  hidden    text-overflow  ellipsis    max-width  13ch   gt  Lorem ipsum dolor sit amet  lt  span gt    Which outputs     Lorem ipsum       x000D   x000D   lt span style   x000D    display inline-block  x000D    white-space  nowrap  x000D    overflow  hidden  x000D    text-overflow  ellipsis  x000D    max-width  13ch   gt  x000D  Lorem ipsum dolor sit amet x000D   lt  span gt  x000D   x000D   x000D

User · Answer

max-length is used for input elements  Use text-overflow property of CSS    claimedRight       display block  width  250px      white-space  nowrap      overflow  hidden      text-overflow  ellipsis

User · Answer

use js      document  ready function             class-span   each function i           var len   this  text   trim   length          if len gt 100                          this  text   this  text   substr 0 100

User · Answer

You can do this with jQuery     x000D   x000D    document  ready function    x000D     x000D        claimedRight   each function  f    x000D   x000D        var newstr     this  text   substring 0 20   x000D          this  text newstr   x000D   x000D          x000D     x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D       lt title gt  lt  title gt  x000D       lt script         src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt  head gt  x000D   lt body gt  x000D       lt span class  claimedRight  maxlength  20  gt Hello this is the first test string   x000D       lt  span gt  lt br gt  x000D       lt span class  claimedRight  maxlength  20  gt Hello this is the second test string   x000D       lt  span gt  x000D       x000D       x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

You can use css ellipsis  but you have to give fixed width and overflow hidden  to that element    x000D   x000D   lt span style  display block text-overflow  ellipsis width  200px overflow  hidden  white-space  nowrap   gt  x000D   Lorem ipsum dolor sit amet  consectetuer adipiscing elit  sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat  x000D    lt  span gt  x000D   x000D   x000D

User · Answer

Here s an example of using text-overflow    x000D   x000D   text   x000D    display  block  x000D    width  100px  x000D    overflow  hidden  x000D    white-space  nowrap  x000D    text-overflow  ellipsis  x000D    x000D   lt span class  text  gt Hello world this is a long sentence lt  span gt  x000D   x000D   x000D

[html] Limit characters displayed in span

Examples related to html

Examples related to css