Avoid line break between html elements

Question

I have this  lt td gt  element    lt td gt  lt i class  flag-bfh-ES  gt  lt  i gt  amp nbsp  34 amp nbsp 666 amp nbsp 66 amp nbsp 66 amp nbsp 66 lt  td gt    I was hoping to keep this into a single line  but this is what I get     As you can see  flag and telephone number are in separate lines  The  amp nbsp  are working in between the numbers of the telephone number  but not between flag and telephone number   How can I make sure that no line-break at all is introduced by the renderer

User · Answer

If the  lt i gt  tag isn t displayed as a block and causing the probelm then this should work    lt td style  white-space nowrap   gt  lt i class  flag-bfh-ES  gt  lt  i gt  amp nbsp  34 amp nbsp 666 amp nbsp 66 amp nbsp 66 amp nbsp 66 lt  td gt

User · Answer

This is the real solution    lt td gt     lt span class  inline-flag  gt       lt i class  flag-bfh-ES  gt  lt  i gt        lt span gt  34 666 66 66 66 lt  span gt     lt  span gt   lt  td gt    css    inline-flag      position  relative     display  inline     line-height  14px     play with this        inline-flag  gt  i      position  absolute     display  block     top  -1px     play with this        inline-flag  gt  span      margin-left  18px     play with this        Example  images which always before text

User · Answer

CSS for that td  white-space  nowrap  should solve it

User · Answer

nobr is too unreliable  use tables   lt table gt         lt tr gt             lt td gt  something  lt  td gt             lt td gt  something  lt  td gt         lt  tr gt   lt  table gt    It all goes on the same line  everything is level with eachother  and you have much more freedom if you want to change something later

User · Answer

If you need this for several words or elements  but can t apply it to a whole TD or similar  the Span tag can be used    lt span style  white-space  nowrap  gt Text to break together lt  span gt      or   lt span class nobr gt Text to break together lt  span gt    If you use the class version  remember to set up the CSS as detailed in the accepted answer

User · Answer

In some cases  e g  html generated and inserted by JavaScript  you also may want to try to insert a zero width joiner    x000D   x000D   wrapper  x000D    width  290px     x000D    white-space  no-wrap  x000D    resize both  x000D    overflow auto   x000D    border  1px solid gray  x000D    x000D   x000D   breakable-text  x000D    display  inline  x000D    white-space  no-wrap  x000D    x000D   x000D   no-break-before   x000D    padding-left  10px  x000D    x000D   lt div class  wrapper  gt  x000D   lt span class  breakable-text  gt Lorem dorem tralalalala LAST WORDS lt  span gt  amp  8205  lt span class  no-break-before  gt TOGETHER lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

There are several ways to prevent line breaks in content  Using  amp nbsp  is one way  and works fine between words  but using it between an empty element and some text does not have a well-defined effect  The same would apply to the more logical and more accessible approach where you use an image for an icon   The most robust alternative is to use nobr markup  which is nonstandard but universally supported and works even when CSS is disabled    lt td gt  lt nobr gt  lt i class  flag-bfh-ES  gt  lt  i gt   34 666 66 66 66 lt  nobr gt  lt  td gt     You can  but need not  use  amp nbsp  instead of spaces in this case    Another way is the nowrap attribute  deprecated obsolete  but still working fine  except for some rare quirks     lt td nowrap gt  lt i class  flag-bfh-ES  gt  lt  i gt   34 666 66 66 66 lt  td gt    Then there   s the CSS way  which works in CSS enabled browsers and needs a bit more code    lt style gt   nobr   white-space  nowrap    lt  style gt       lt td class nobr gt  lt i class  flag-bfh-ES  gt  lt  i gt   34 666 66 66 66 lt  td gt

[html] Avoid line break between html elements

Examples related to html

Examples related to whitespace