No line-break after a hyphen

Question

I m looking to prevent a line break after a hyphen - on a case-by-case basis that is compatible with all browsers   Example   I have this text   3-3 8  which in HTML is this   3-3 8 amp rdquo   The problem is that near the end of a line  because of the hyphen  it breaks and wraps to the next line instead of treating it like a full word     3- 3 8    I ve tried inserting the  zero width no break character    amp  65279  with no luck     3- amp  65279 3 8 amp rdquo    I m seeing this in Safari and thinking it will be the same in all browsers   The following is my doctype and character encoding      lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN      http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt    lt html xmlns  http   www w3 org 1999 xhtml  gt       lt meta http-equiv  Content-Type  content  text html charset utf-8    gt    Is there any way I can prevent these from line-breaking after the hyphen   I do not need any solution that applies to the whole page    just something I can insert as needed  like a  zero width no break character   except one that works   Here is a Demo   Simply make the frame narrower until the line breaks at the hyphen   http   jsfiddle net RagKH

User · Answer

IE8 9 render the non-breaking hyphen mentioned in CanSpice s answer longer than a typical hyphen  It is the length of an en-dash instead of a typical hyphen  This display difference was a deal breaker for me   As I could not use the CSS answer specified by Deb I instead opted to use no break tags    lt nobr gt e-mail lt  nobr gt    In addition I found a specific scenario that caused IE8 9 to break on a hyphen    A string contains words separated by non-breaking spaces -  amp nbsp  Width is limited Contains a dash   IE renders it like this     The following code reproduces the problem pictured above  I had to use a meta tag to force rendering to IE9 as IE10 has fixed the issue  No fiddle because it does not support meta tags    lt  DOCTYPE html gt   lt html lang  en  gt       lt head gt           lt meta http-equiv  X-UA-Compatible  content  IE 9    gt           lt meta charset  utf-8   gt           lt style gt              body   padding  20px                div   width  300px  border  1px solid gray             lt  style gt       lt  head gt       lt body gt           lt div gt                     lt p gt If amp nbsp there amp nbsp is amp nbsp a amp nbsp - amp nbsp and amp nbsp words amp nbsp are amp nbsp separated amp nbsp by amp nbsp the amp nbsp whitespace amp nbsp code amp nbsp  amp amp nbsp  amp nbsp then amp nbsp IE amp nbsp will amp nbsp wrap amp nbsp on amp nbsp the amp nbsp dash  lt  p gt           lt  div gt       lt  body gt   lt  html gt

User · Answer

You can also do it  the joiner way  by inserting  U 2060 Word Joiner     If Accept-Charset permits  the unicode character itself can be inserted directly into the HTML output   Otherwise  it can be done using entity encoding  E g  to join the text red-brown  use   red- amp  x2060 brown   or  decimal equivalent    red- amp  8288 brown     Another usable character is  U FEFF Zero Width No-break Space    x2060  hairsp   x2060 1 hairsp     red- amp  xfeff brown   and  decimal equivalent    red- amp  65279 brown     1   Note that while this method still works in major browsers like Chrome  it has been deprecated since Unicode 3 2      Comparison of  the joiner way  with  U 2011 Non-breaking Hyphen     The word joiner can be used for all other characters  not just hyphens  When using the word joiner  most renderers will rasterize the text identically  On Chrome  FireFox  IE  and Opera  the rendering of normal hyphens  eg      a-b-c-d-e-f-g-h-i-j-k-l-m-n-o-p-q-r-s-t-u-v-w-x-y-z   is identical to the rendering of normal hyphens  with U 2060 Word Joiner   eg      a-  x2060 b-  x2060 c-  x2060 d-  x2060 e-  x2060 f-  x2060 g-  x2060 h-  x2060 i-  x2060 j-  x2060 k-  x2060 l-  x2060 m-  x2060 n-  x2060 o-  x2060 p-  x2060 q-  x2060 r-  x2060 s-  x2060 t-  x2060 u-  x2060 v-  x2060 w-  x2060 x-  x2060 y-  x2060 z   while the above two renders differ from the rendering of  Non-breaking Hyphen   eg      a  x2011 b  x2011 c  x2011 d  x2011 e  x2011 f  x2011 g  x2011 h  x2011 i  x2011 j  x2011 k  x2011 l  x2011 m  x2011 n  x2011 o  x2011 p  x2011 q  x2011 r  x2011 s  x2011 t  x2011 u  x2011 v  x2011 w  x2011 x  x2011 y  x2011 z      The extent of the difference is browser-dependent and font-dependent  E g  when using a font declaration of  arial   Firefox and IE11 show relatively huge variations  while Chrome and Opera show smaller variations     Comparison of  the joiner way  with  lt span class c1 gt  lt  span gt   CSS  c1  white-space nowrap    and  lt nobr gt  lt  nobr gt     The word joiner can be used for situations where usage of HTML tags is restricted  e g  forms of websites and forums  On the spectrum of presentation and content  majority will consider the word joiner to be closer to content  when compared to tags        bull  As tested on Windows 8 1 Core 64-bit using   nbsp  nbsp  nbsp  nbsp  bull  IE 11 0 9600 18205  nbsp  nbsp  nbsp  nbsp  bull  Firefox 43 0 4  nbsp  nbsp  nbsp  nbsp  bull  Chrome 48 0 2564 109  Official Build  m  32-bit   nbsp  nbsp  nbsp  nbsp  bull  Opera 35 0 2066 92

User · Answer

Late to the party  but I think this is actually the most elegant  Use the WORD JOINER Unicode character  amp  8288  on either side of your hyphen  or em dash  or any character   So  like so    amp  8288     amp  8288    This will join the symbol on both ends to its neighbors  without adding a space  and prevent line breaking

User · Answer

You could also wrap the relevant text with   lt span style  white-space  nowrap   gt  lt  span gt

User · Answer

Try using the non-breaking hyphen  amp  8209   I ve replaced the dash with that character in your jsfiddle  shrunk the frame down as small as it can go  and the line doesn t split there any more

[html] No line-break after a hyphen

Examples related to html

Examples related to css

Examples related to character-encoding

Examples related to line-breaks

Examples related to hyphenation