How do I wrap text in a span

Question

I ve got a span that s 350 pixels wide  If there s more text than that  it just goes straight out to the right off to the side of the span  How do I force the text to wrap down into a paragraph  I ve tried a variety of things which I ve found on the web  and nothing seems to work   This needs to work for IE 6 onward  It would be good if it worked in Firefox  too   UPDATE   Here s a little more info  I m trying to implement a tooltip  Here s my code   HTML   lt td style  text-align left   nowrap  nowrap  class  t-last  gt       lt a class  htooltip  href     gt          Notes lt span style  top  40px  left  1167px    gt               lt ul gt                   lt li gt Lorem ipsum dolor sit amet  consectetuer adipiscing elit  Maecenas porttitor congue massa  Fusce posuere  magna sed pulvinar ultricies  purus lectus malesuada libero  sit amet commodo magna eros quis urna  Nunc viverra imperdiet enim  Fusce est  Vivamus a tellus  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas  Proin pharetra nonummy pede  Mauris et orci  lt  li gt               lt  ul gt           lt  span gt       lt  a gt   lt  td gt    CSS    htooltip   htooltip visited   tooltip active       color   0077AA      text-decoration  none      htooltip hover       color   0099CC      htooltip span       display  inline-block         -ms-word-wrap  normal        word-wrap  break-word       background-color  black      color   fff      padding  5px 10px 5px 40px      position  absolute      text-decoration  none      visibility  hidden      width  350px      z-index  10      htooltip hover span       position  absolute      visibility  visible

User · Answer

Wrapping can be done in various ways  I ll mention 2 of them   1   text wrapping - using white-space property http   www w3schools com cssref pr text white-space asp  2   word wrapping - using word-wrap property http   webdesignerwall com tutorials word-wrap-force-text-to-wrap  By the way  in order to work using these 2 approaches  I believe you need to set the  display  property to block of the corresponding span element   However  as Kirill already mentioned  it s a good idea to think about it for a moment  You re talking about forcing the text into a paragraph  PARAGRAPH  That should ring some bells in your head  shouldn t it

User · Answer

I ve got a solution that should work in IE6  and definitely works in 7   amp  FireFox Chrome   You were on the right track using a span  but the use of a ul was wrong and the css wasn t right   Try this   lt a class  htooltip  href     gt      Notes       lt span gt          Lorem ipsum dolor sit amet  consectetuer adipiscing elit  Maecenas porttitor congue massa  Fusce posuere  magna sed pulvinar ultricies  purus lectus malesuada libero  sit amet commodo magna eros quis urna  Nunc viverra imperdiet enim  Fusce est  Vivamus a tellus  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas  Proin pharetra nonummy pede  Mauris et orci       lt  span gt   lt  a gt     htooltip   htooltip visited   tooltip active       color   0077AA      text-decoration  none      htooltip hover       color   0099CC      htooltip span       display   none      position  absolute      background-color  black      color   fff      padding  5px 10px 5px 40px      text-decoration  none      width  350px      z-index  10      htooltip hover span       display  block      Everyone was going about this the wrong way  The code isn t valid  ul s cant go in a s  p s can t go in a s  div s cant go in a s  just use a span  remembering to make it display as a block so it will wrap as if it were a div p etc

User · Answer

Try putting your text in another div inside your span   i e    lt span gt  lt div gt some text lt  div gt  lt  span gt

User · Answer

You should use white-space with display table  Example      legend           display table     Enable line-wrapping in IE8             white-space normal     Enable line-wrapping in old versions of some other browsers

User · Answer

Try  x000D   x000D   test   white-space pre-wrap    x000D   lt a class  test  href     gt      Notes       lt span gt          Lorem ipsum dolor sit amet  consectetuer adipiscing elit  Maecenas porttitor congue massa  Fusce posuere  magna sed pulvinar ultricies  purus lectus malesuada libero  sit amet commodo magna eros quis urna  Nunc viverra imperdiet enim  Fusce est  Vivamus a tellus  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas  Proin pharetra nonummy pede  Mauris et orci       lt  span gt   lt  a gt  x000D   x000D   x000D

[html] How do I wrap text in a span?

Examples related to html

Examples related to css

Examples related to internet-explorer

Examples related to word-wrap