How to Use Automatic CSS Hyphens with 'Word-Break: Break-All'

css break word with hyphen

Chrome does not do hyphenation apparently (at least on Windows). You may fare better with other browsers or platforms. You can use (soft hyphen) if you know in advance where you want to break. Otherwise, at least in Chrome on Windows there's no way to get a hyphen when CSS breaks a long word, unless it was in the input to start with.

.content {  max-height: 80px;  width: 200px;  overflow-x: hidden;  word-wrap: break-word;  padding: 10px;  font-weight: bold;  font-size: 16px;  border: solid 1px #000;}

Using soft hyphen:<div class="content">BERUFSBILDUNGSZENTRUM</div>    
Using automatic hyphenation (doesn't work in Chrome)<div class="content" lang="de" style="hyphens: auto; ">BERUFSBILDUNGSZENTRUM</div>
Soft hyphen not displayed if it doesn't break there<div class="content" style="width: 400px; ">BERUFSBILDUNGSZENTRUM</div>

Word wrap with css `hyphens` fails to wrap substring

As @Salman A has pointed out, quite a lot of characters (e.g like slashes or colons, undescores etc.) are not recognized as proper word/syllable joints. Strings like "chamitoff/profile" will be treated as one long compound word "chamitoffprofile".

When it comes to URL like strings, you don't want to overflow – you'd still be better off with something like word-break: break-word;

Speaking of css hyphens property: its capabilities are still 'limited' (at least in 2021).
E.g. Chrome has introduced support for this feature in version 88 (according to caniuse).

Here's a resizable snippet:

*{
box-sizing:border-box;
}

body{
font-family: 'Segoe UI';
font-size: calc(1.75vw + 1.75vh / 2);
padding: 10px;
}

.resizable{
  width: 20ch;
  height: 10em;
  hyphens: auto;
  resize:both;
  overflow:auto;
  padding-right:1em;
  border: 1px solid #ccc
}

.resizable p{
  hyphens: auto;
}

.break-words{
  hyphens: none;
  word-break: break-word;
}

 <h2>Example</h2>
 <div class="resizable">
    <p>people/type:astronauts/name-gregory-chamitoff/profile <br /><strong>Original</strong></p>
    <p>peopletype:astronautsname-gregory-chamitoffprofile <br /><strong>Dash replaced by hyphens</strong></p>
    <p>peopletype_astronautsname_gregory_chamitoff_profile <br /><strong>Dash replaced by underscores</strong></p>
    <p>peopletype astronautsname-gregory-chamitoffprofile <br /><strong>Dash and colons replaced by hyphens</strong></p>
    <p>peopletype astronauts name gregory chamitoff profile <br /><strong>Dash replaced by spaces</strong></p>
    <p class="break-words">people/type:astronauts/name-gregory-chamitoff/profile <br /><strong>Dash replaced by spaces</strong></p>
   </div>

<h2>URLs</h2>
   <div class="resizable">
       <p><a href="#">https://www.maybeweshouldhaveoptedfor ashorterdomain.com/contact/specialinterest?product_id=1234567878</a> <br /><strong>URL – "hyphenated"</strong></p>

      <p class="break-words"><a href="#">https://www.maybeweshouldhaveoptedfor ashorterdomain.com/contact/specialinterest?product_id=1234567878</a> <br /><strong>URL – word-break</strong></p>
      <p class="break-words"><a href="#">contact@maybeweshouldhaveoptedfor ashorterdomain.com</a> <br /><strong>Email example</strong></p>
  </div>

FireFox word breaks OK with css, but one letter at a time, not where hyphens go

a) Don't use word-break when you want to use hyphenation. It will simply always break the words.

b) To be on the safe side, add a language attribute to the container (can be html, body, or also the containing div, like <div class="a" lang="en"> - see below.

.a {  width: 240px;  border: 1px solid #eee;}
.x {   /* Adds a hyphen where the word breaks, if supported (No Blink) */  -ms-hyphens: auto;  -moz-hyphens: auto;  -webkit-hyphens: auto;  hyphens: auto;  }

<div class="a" lang="en">  <p class="x">    A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy,    my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.  </p></div>

How to fix when words are cut using word-wrap? CSS

Actually the styles are working fine.

I found out that my custom keyboard does not returning " " space if I tap spacebar. It instead return which causes the problem.

What I did is I replace to space(" "), and it solves the problem. Replacing from javascript dom text node

How to Use Automatic CSS Hyphens with 'Word-Break: Break-All'

css break word with hyphen

Word wrap with css `hyphens` fails to wrap substring

FireFox word breaks OK with css, but one letter at a time, not where hyphens go

How to fix when words are cut using word-wrap? CSS

Related Topics

Leave a reply