How can I wrap or break long text word in a fixed width span

Question

I want to create a span with a fixed width that when I type any thing in the span like  lt span gt lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk lt  span gt   a long string of non-spaced text  the word s  break or wrap to next line   Any ideas

User · Accepted Answer

You can use the CSS property word-wrap break-word   which will break words if they are too long for your span width   x000D   x000D  span    x000D      display block  x000D      width 150px  x000D      word-wrap break-word  x000D    x000D   lt span gt VeryLongLongLongLongLongLongLongLongLongLongLongLongExample lt  span gt  x000D   x000D   x000D

User · Answer

In my case  display  block was breaking the design as intended   The max-width property just saved me   and for styling  you can use text-overflow  ellipsis as well   my code was  max-width  255px overflow hidden

User · Answer

Like this  DEMO    li span      display block      width 50px      word-break break-all

User · Answer

Just to extend the pratical scope of the question and as an appendix to the given answers   Sometimes one might find it necessary to specify the selectors a little bit more      By defining the the full span as display inline-block you might have a hard time displaying images     Therefore I prefer to define a span like so   span     display block    width 150px    word-wrap break-word          p span  a span  h1 span  h2 span  h3 span  h4 span  h5 span     display inline-block    img    display block

User · Answer

Try following css with addition of white-space   span       display  block      word-wrap break-word      width  50px      white-space  normal

User · Answer

By default a span is an inline element    so that s not the default behavior   You can make the span behave that way by adding display  block  to your CSS   span       display  block      width  100px

User · Answer

Try this  span       display  block      width  150px

[html] How can I wrap or break long text/word in a fixed width span?

Examples related to html

Examples related to css