Clever Geek Handbook

Why don't hyphens work with inner <span> s?

I am trying to get hyphens working on text that contains <span>

elements inside to be emphasized. This seems to break the hyphen algorithm. Is there a way to fix the behavior so that the hyphens are the same as without the elements <span>

? I am not asking for a workaround like&shy;

enter image description here

Code (sandbox: https://codepen.io/anon/pen/ayzxpM ):

.limit {
  max-width: 50px;
  hyphens: auto;
  font-size: 20px;
  background-color: #eee;
}

span {
  color: red;
}
      

        
        
        
      

    
<div class="limit">
  <p>
    Appletreefruitthing
  </p>
  <p>
    Apple<span>tree</span>fruitthing
  </p>
</div>
Run code


Using the lang attribute

Adding a lang attribute, as suggested by Vadim Ovchinnikov ( <div class="limit" lang="en">

), may yield better results in some platform / browser combinations. In Firefox 54, Windows 10, this is the output:

enter image description here

But even that feels like a buggy. The hyphen should be black in my opinion, and the hyphen algorithm seems to be missing out on the chance to make a line break between "fruit" and "tree", also completely ignoring max-width

which is set for the container.

+3


source to share


2 answers


Chrome only has partial support for the property hyphens

(Mac and Android platforms only), so you can't get it to work on Windows.

I see no difference between presence and absence span

in Firefox, IE and Edge (all on Windows) for this code.

For it to work you need to set lang

for container and add vendor prefixes (for -ms-hyphens

IE / Edge and -webkit-hyphens

for Safari). Demo video:

.limit {
  max-width: 50px;
  font-size: 20px;
  /* Safari */
  -webkit-hyphens: auto;
  /* IE, Edge */
  -ms-hyphens: auto;
  hyphens: auto;
  background-color: #eee;
}

span {
  color: red;
}
      

        
        
        
      

    
<div class="limit" lang="en">
  <p>
   Appletreefruitthing
  </p>
  <p>
    Apple<span>tree</span>fruitthing
  </p>
</div>
Run code




To work in all browsers you shouldn't use a CSS property hyphens

, just insert &shy;

manually where you want the hyphens.

.limit {
  max-width: 50px;
  font-size: 20px;
  background-color: #eee;
}

span {
  color: red;
}
      

        
        
        
      

    
<div class="limit">
  <p>
   Apple&shy;tree&shy;fruitthing
  </p>
  <p>
    Apple&shy;<span>tree</span>&shy;fruitthing
  </p>
</div>
Run code


+1


source 


hyphens: manual

togteher with

&shy;

may work see documentation here https://css-tricks.com/almanac/properties/h/hyphenate/



this code works on codefen

<div class="limit">
  <p>
   Appletreefruitthing
  </p>
  <p>
    Apple&shy;<span>tree</span>&shy;fruit&shy;thing
  </p>
</div>

CSS

.limit {
  hyphens: manual;
}
0


source






More articles:


All Articles