html - How to word-break on a dash?


Translate

Given a relatively simple CSS:

div {
  width: 150px;
}
<div>
  12333-2333-233-23339392-332332323
</div>

All Answers
  • Translate

    Replace your hyphens with this:

    &shy;
    

    It's called a "soft" hyphen.

    div {
      width: 150px;
    }
    <div>
      12333&shy;2333&shy;233&shy;23339392&shy;332332323
    </div>

  • Translate

    In all modern browsers* (and in some older browsers, too), the <wbr> element is the perfect tool for providing the opportunity to break long words at specific points.

    To quote from that link:

    The Word Break Opportunity (<wbr>) HTML element represents a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.

    Here's how it could be used to in the OP's example (or see it in action at JSFiddle):

    <div style="width: 150px;">
      12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
    </div>
    

    *I've tested it in IE9, IE10, and the latest versions of Chrome, Firefox, and Opera, and Safari.

    div {
      width: 150px;
    }
    <div>
      12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
    </div>

  • Translate

    As part of CSS3, it is not yet fully supported, but you can find information on word-wrapping here. Another option is the wbr tag, &shy;, and &#8203; none of which are fully supported either.


  • Translate

    Your example works as expected in Google Chrome, Safari (Windows), and IE8. The text breaks out of the 150px box in Firefox 3 and Opera 9.5.

    Additionally &shy; won't work for your example, as it will either:

    • work when word-breaking but when not word-breaking not display any hyphens, or

    • work when not word-breaking but display two hyphens when word-breaking since it adds a hyphen on a break.


  • Translate

    In this specific instance (where your string is going to contain hyphens) I'd transform the text to this server-side:

    <div style="width:150px;">
      <span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>
    </div>

  • Translate

    Depending on what you want to see exactly, you can use a combination of hyphen, soft hyphen, and/or zero width space.

    On a soft hyphen, your browser can word-break (adding an hyphen). On a zero width space, your browser can word break (without adding anything).

    Thus, if your code is something like :

    111111&shy;222222&shy;-333333&#8203;444444-&#8203;555555

    then your browser will show this with no word-break :

    1111112222222-33333334444444-5555555

    and this will every possible word-break :

    111111-
    222222-
    -333333
    444444-
    555555

    Just pick up the option you need. In your case, it may be the one between 4s and 5s.


  • Translate

    You can also use :

    word-break:break-all;
    

    ex.

    <div style='width:10px'>ababababababbabaabababababababbabababa</div>
    

    output:

    abababababa
    ababababbba
    abbabbababa
    ababb
    

    word-break is break all the word or line even if no-space in sentence that not feets in provided width or height. nut for that you must be provide a width or height.


  • Translate

    The non-breaking hyphen works well.

    HTML Entity (decimal)

    &#8209;
    

  • Translate

    Instead of - you can use &hyphen; or \u2010.

    Also, make sure the hyphens css property was not set to none (The default value is manual).

    <wbr> is not supported by Internet Explorer.


  • Translate

    Hope this may help

    use <br>(break) tag where you want to break the line.


  • Translate

    You can use 0 width space after hyphen character:

    div {
      width: 150px;
    }
    <div>
      12333-&#8203;2333-&#8203;233-&#8203;23339392-&#8203;332332323
    </div>