インラインブロック要素の行内のソフトハイフン

Question

インラインブロック要素の間に改行がある場合、ハイフンを挿入する必要があります。

これは私が試したものです：

span { 
 
    display: inline-block; 
 
}

<div style="width: 200px"> 
 
    <span>This is a long se</span>&shy;<span>quence of spans.</span> 
 
    <span>This is a long se</span>&shy;<span>quence of spans.</span> 
 
    <span>This is a long se</span>&shy;<span>quence of spans.</span> 
 
</div>

しかし、ハイフンは、少なくともChromeで、表示されません。私はこのような結果が必要です。このような結果は、正しく表示されますが、スパンはありません。

span { 
 
    display: inline-block; 
 
}

<div style="width: 200px"> 
 
    <span>This is a long se</span>-<span>quence of spans.</span> 
 
    <span>This is a long se</span>-<span>quence of spans.</span> 
 
    <span>This is a long se</span>-<span>quence of spans.</span> 
 
</div>

スペース（Add soft hyphens in a CMS: getting it to work in Chromeを参照）動作しません追加するインラインブロック使用：JavaScriptを使用せずに、

span { 
 
    display: inline-block; 
 
}

<div style="width: 200px"> 
 
    <span>This is a long se</span> &shy; <span>quence of spans.</span> 
 
    <span>This is a long se</span> &shy; <span>quence of spans.</span> 
 
    <span>This is a long se</span> &shy; <span>quence of spans.</span> 
 
</div>

任意のアイデアを？ありがとうございました。

Answer 1

span { 
 
    display: inline-block; 
 
}

<div style="width: 200px"> 
 
    <span>This is a long se</span> &#8209; <span>quence of spans.</span> 
 
    <span>This is a long se</span> &#8209; <span>quence of spans.</span> 
 
    <span>This is a long se</span> &#8209; <span>quence of spans.</span> 
 
</div>

Answer 2

打破する文字が存在しないので、Hyphenation Opportunityはありません。少なくとも、これはChromeが標準を実装する方法を選択したものです。

More info

Answer 3

Hyphenator.jsオプションのように思えます。

Chromeでうまく動作し、従来のブラウザ用のポリフィルがあり、リサイズ時にハイフンが再表示されます。 Demo here。

私はJSを避ける​​ことについてあなたのコメントを見ましたが、可能であるとは思わないので、最終的なテキストサイズはクライアント側でのみ定義され、ユーザーのブラウザ設定の影響を受ける可能性があります。

Answer 4

ちょうど­エンティティの周りのスパンせずにそれを行う：スパンは、それ自体でインライン要素なので、­がない

を行いワード（ハイフンが表示されていない理由です）、interupt

span { 
 
    display: inline-block; 
 
}

<div style="width: 140px"> 
 
    <span>This is a long se&shy;quence of spans.</span> 
 
    <span>This is a long se&shy;quence of spans.</span> 
 
    <span>This is a long se&shy;quence of spans.</span> 
 
</div>

Answer 5

私はJavaScriptで解決しました。 HTML：

<div style="width: 200px"> 
    <span>This is a long se<span class="hyphen">-</span></span><span>quence of spans.</span> 
    <span>This is a long se<span class="hyphen">-</span></span><span>quence of spans.</span> 
    <span>This is a long se<span class="hyphen">-</span></span><span>quence of spans.</span> 
</div> 

CSS：

.hyphen { 
    display: none; 
} 

.hyphen.hyphen-shown { 
    display: inline; 
} 

はJavaScript：

var handler = function(evt) { 
     var hyphens = document.getElementsByClassName("hyphen"); 

     for (var i = 0; i < hyphens.length; i++) { 
      var hyphen = hyphens[i]; 

      hyphen.className = "hyphen"; 

      var element = hyphen.parentNode.parentNode; 
      var element = parent.nextElementSibling; 

      if (parent == null || next == null) { 
       continue; 
      } 

      var py = parent.getBoundingClientRect().bottom; 
      var ny = next.getBoundingClientRect().bottom; 

      if (Math.abs(py - ny) > 1) { 
       hyphen.className = "hyphen hyphen-shown"; 
       var py2 = parent.getBoundingClientRect().bottom; 

       if (Math.abs(py - py2) > 1) { 
        // The hyphen made the parent be shown on next line. 
        hyphen.className = "hyphen"; 
       } 
      } 
     } 
    }; 

    window.addEventListener('resize', handler, false);