HTMLのソフトハイフン(<wbr>と&shy;)


154

Webページのソフトハイフンを使用して問題をどのように解決しますか?テキストには、ハイフンで改行したい長い単語がある場合があります。ただし、単語全体が同じ行にある場合は、ハイフンを表示したくない。

このページの コメントによる<wbr>と、非標準の「Netscapeが発明したタグスープ」です。&shy; 標準準拠にも問題があるようです。ないように思えるすべてのブラウザのための作業溶液を取得する方法

ソフトハイフンを処理する方法はどれですか。なぜそれを選択したのですか。推奨されるソリューションまたはベストプラクティスはありますか?


ここで 関連するSOディスカッションを参照してください。


早く終了して申し訳ありません-これは近いですが、他とまったく同じではありません。リンクを離れるつもりです。
Chris Marasti-Georg、

2
<wbr>ハイフンではないことに注意してください。
Andreas Rejbrand 2015

テスト用ブラウザ:jsfiddle.net/k2hbrjz8/2次のいずれか&#173; または&shy; 表示とコピー/貼り付けで必要に応じて機能するようです。<wbr>ダブルクリックしたときに単語の半分だけが選択されます。検索は、現在のFirefoxですべてを検索します(このコメントの日付)。&#173; インデックスはより良いです、それを使用してください。
karmakaze 2018

回答:


132

残念ながら、&shyのサポートはブラウザ間で一貫していないため、実際には使用できません。

QuirksModeは正しいです。現在、HTMLでソフトハイフンを使用する良い方法はありません。それらなしで行くためにあなたが何ができるかを見てください。

2013年の編集:QuirksModeよると&shy;すべての主要なブラウザーで機能する/サポートされるようになりました。


11
残念ながら、そうではありません。ブラウザでソフトハイフンを含む単語を検索してみてください。ほとんどのブラウザは、ソフトハイフンを単に無視するのではなく、2つの別個の単語として扱います。
gclj5 2009年

3
@ gclj5 &shy;Chrome v21で単語の検索をテストしたところ、ソフトハイフンが正しく無視されました。IE、FF、その他のブラウザについてはわかりません。
evanrmurphy、2012年

6
最近のFF、Chrome、Safariでは問題なく動作します(つまり、単語は検索可能です)。
MMM

10
しかし、テキストを&shy;でコピーしてください Chromeではダッシュ付きのテキストを返します。例:「uni&shy;後で&shy; al」。「uni-later-al」としてコピーされます。
Enyby 2014年

2
今日&shy;、Webkitの特定のバグ(Safari、Safari iOS、Chromeの最新バージョンに影響を与える)が原因で使用を中止する必要があり、かなりの数のカスタムフォント(無料と商用の両方)で奇妙な文字がレンダリングされる
Nico Pernice 2015年

58

2015年2月の要約(2017年11月に一部更新)

&#173;グーグルがそれを含む単語のインデックスを付けることができるので、それらはすべて非常にうまく機能し、エッジになります。

  • ブラウザで: &shy;&#173;両方のディスプレイの主要なブラウザで期待どおりに(でも古いIE!)。<wbr>IEの最近のバージョン(10または11)ではサポートされておらず、Edgeでは正しく機能しません。
  • ブラウザからコピー&ペーストする場合:(2015テスト)のための予想通り&shy;&#173;MacでChromeとFirefox用、Windowsの(10)に、それは文字を保持し、それらをサポートするアプリケーションにメモ帳や目に見えないソフトハイフンにハードハイフンを貼り付けます。IE(win7)は常にIE10でもハイフンで貼り付けられ、Safari(Mac)は一部のアプリケーション(MS Wordなど)ではハイフンとして貼り付けられ、他のアプリケーションでは貼り付けられません
  • ページ上の検索のための作品&shy;&#173;(でも最大IE11に)完全一致のみをコピー・アンド・ペーストし一致IE以外のすべてのブラウザで
  • 検索エンジン: Googleはを含む&#173;単語と通常のタイプの単語を照合します。2017年以降、を含む単語に一致しなくなったようです&shy;。Yandexは同じであると考えています。BingとBaiduも一致しないようです。

試して

最新のライブテストのために、ソフトハイフンを使用したユニークな単語の例をいくつか示します。

  • &shy;- confumbabbl&shy;ication&shy;ism- confumbabblicationism
    • ................................................................. ................................................................. .......... confumbabblicationism
    • ................................................................. ................................................................. .............. confumbabblicationism

<wbr>- donfounbabbl<wbr>ication<wbr>ism。このサイトは<wbr/>出力から削除されます。ここでは、Aのテストのためにjsbin.comスニペット

  • &#173;-- eonfulbabbl&#173;ication&#173;ismイオンフルバブリケーション
    • ................................................................. ................................................................. ............. eonfulbabblicationism
    • ................................................................. ................................................................. ................ eonfulbabblicationism

ここでは、恥ずかしがり屋のハイフンはありません(これは、ページ上の検索テストにコピーして貼り付けるためのものです。検索エンジンのテストを中断しないように記述されています)。

ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationismZZZ

ブラウザ間で表示

成功:通常の単語として表示されます。ただし、指定された場所で改行およびハイフネーションが行われる場合は、改行する必要があります。

失敗:異常に表示される、または意図した場所で壊れない。

  • Chrome(40.0.2214.115、Mac):&shy;成功、<wbr>成功、&#173;成功
  • Firefox(35.0.1、Mac): &shy;成功、<wbr>成功、&#173;成功
  • Safari(6.1.2、Mac): &shy;成功、<wbr> まだテストされていません&#173;成功
  • エッジ(Windows 10):&shy;成功、<wbr> 失敗(ブレーク、ハイフンなし)、&#173;成功
  • IE11(Windows 10):&shy;成功、<wbr> 失敗(中断なし)、&#173;成功
  • IE10(Windows 10):&shy;成功、<wbr> 失敗(中断なし)、&#173;成功
  • IE8(Windows 7):不安定-まったく機能せず、CSSに従うだけ word-wrapです。時々、彼らはすべてうまくいくようです。その理由について明確なパターンはまだ見つかりません。
  • IE7(Windows 7):&shy;成功、<wbr>成功、&#173;成功

ブラウザ間でコピーして貼り付け

成功:ハイフンなしで単語全体をコピーして貼り付けます。(ブラウザー検索、MS Word 2011、およびSublime TextへのMac貼り付けでテスト済み)

失敗:ハイフン、スペース、改行、またはジャンク文字を使用した貼り付け。

  • Chrome(40.0.2214.115、Mac):&shy;成功、<wbr>成功、&#173;成功
  • Firefox(35.0.1、Mac): &shy;成功、<wbr>成功、&#173;成功
  • Safari(6.1.2、Mac): MS Wordに&shy; 失敗(すべてをハイフンとして貼り付け)、他のアプリケーションで成功、<wbr> 失敗&#173; 失敗 MS Wordの(ハイフンとしてすべてを貼り付け)に、他のアプリケーションで成功
  • IE10(Win7):&shy; failはすべてをハイフンとして貼り付けます、<wbr> fail&#173; failすべてをハイフンとして貼り付けます
  • IE8(Win7):&shy; failはすべてをハイフンとして貼り付けます、<wbr> fail&#173; failすべてをハイフンとして貼り付けます
  • IE7(Win7):&shy; failはすべてをハイフンとして貼り付け、<wbr> fail&#173; failはすべてをハイフンとして貼り付けます

検索エンジンの一致

2017年11月に更新<wbr>。StackOverflowのCMSが削除したため、テストされていません。

成功:ハイフンのない単語全体を検索すると、このページが見つかります。

失敗:検索エンジンは、単語の壊れたセグメント、またはハイフンを含む単語の検索でのみこのページを見つけます。

  • Google:&shy;失敗、&#173;成功
  • Bing:&shy;失敗、&#173;失敗
  • Baidu:&shy;失敗する、&#173;失敗する(長い文字列内のフラグメントに一致するが、a &#173;または&shy;
  • Yandex:&shy;失敗、&#173;成功(Baiduのような文字列フラグメントと一致する可能性はありますが、100%確実ではありません)

ブラウザー間でページを検索

検索エンジンのマッチングとしての成功と失敗。

  • Chrome(40.0.2214.115、Mac):&shy;成功、<wbr>成功、&#173;成功
  • Firefox(35.0.1、Mac): &shy;成功、<wbr>成功、&#173;成功
  • Safari(6.1.2、Mac): &shy;成功、<wbr>成功、&#173;成功
  • IE10(Win7):両方に恥ずかしがり屋のハイフンが含まれている&shy; 場合にのみ失敗する<wbr>成功、&#173; 失敗の両方が、恥ずかしがり屋ハイフンが含まれている場合にのみマッチを
  • IE8(win7の):&shy; 失敗の両方が、恥ずかしがり屋ハイフンが含まれている場合にのみマッチし、<wbr>成功、&#173; 失敗の両方が、恥ずかしがり屋ハイフンが含まれている場合にのみマッチを
  • IE7(win7の):&shy; 失敗の両方が、恥ずかしがり屋ハイフンが含まれている場合にのみマッチし、<wbr>成功、&#173; 失敗の両方が、恥ずかしがり屋ハイフンが含まれている場合にのみマッチを

今日、<wbr/>FirefoxとChromeで動作します。(そして、正直なところ、少なくともWindowsでは2月でさえそうだったと思います。)
Andreas Rejbrand

1
Windows 7でChromeとFirefoxの最新バージョンを使用していて<wbr/>、両方で動作します。<wbr>要素、ブレークが発生したときにハイフンを追加することになっていないことに注意してください。言い換えれば、<wbr/>&shy; されていない同じことを行うことになって
Andreas Rejbrand 2015

ああ、それを見ると、SEのCMSが<wbr/>sをソースコードに残したまま最終マークアップから削除したようです。くそーSE!ウィルの編集...
user56reinstatemonica8

奇妙なことに、その「バグ」を再現することはできません。
Andreas Rejbrand 2015

テストで何か意味が&shy;あり&#173;ますか?それらがDOMに到達すると、それらは文字通り同じです。HTMLトークナイザーだけがまったく異なります。
gsnedders 2015

32

CSS3でハイフネーション標準化するための継続的な取り組みがありますます。

最近のブラウザの一部、特にSafariとFirefoxはすでにこれをサポートしています。これは、ブラウザサポートに関する最新の優れたリファレンスです。

CSSハイフネーションが普遍的に実装されると、それが最善の解決策になります。それまでの間、ハイフネーターをお勧めします - JSスクリプトをその特定のブラウザのために最も適切な方法であなたのテキストをハイフネーションする方法を図。

ハイフネーター:

  • Franklin M. Liangsハイフネーションアルゴリズムに依存、一般にLaTeXおよびOpenOfficeで知らにます。
  • 使用可能な場合はCSS3ハイフネーションを使用し、
  • 自動的に挿入 &shy;他のほとんどのブラウザにれ、
  • 複数の言語をサポートし、
  • 高度に設定可能であり、
  • javascriptが有効になっていない場合は、適切にフォールバックします。

私はそれを使いました、そしてそれは素晴らしい働きをします!


Firefoxはこのプロパティをサポートしていますが、適用しても何もしません
bob0the0mighty

Firefoxは動作しますが、htmlタグにlang型を含める必要があります。
bob0the0mighty 2015年


20

私はを使用し&shy;、必要に応じて手動で挿入しました。

指定された方法でそれらを処理しないブラウザー(古いものか奇妙なもの)が周りにあるため、人々がテクニックを使用しないのは残念です。見つけた&shy;最近のInternet ExplorerとFirefoxの両方のブラウザで正常に動作しているが。これで十分でしょう。成熟したものを使用するか、奇妙なブラウザを使用した場合は自己責任で続行するように指示するブラウザチェックを含めることができます。

音節化はそれほど簡単ではなく、JavaScriptに任せることはお勧めできません。これは言語固有のトピックであり、テキストを苛立たせたくない場合は、デスクマンが注意深く修正する必要があります。ドイツ語などの一部の言語は複合語を形成し、分解の問題を引き起こす可能性があります。たとえば、Spargelder胚芽、節約されたお金、pl。)は、音節規則によって、2つの場所にラップされる場合があります(Spar-gel-der)。しかし、第二の位置にそれを包む、として表示するための第1の部分を回転Spargel-胚芽。読者の頭の中で完全に誤解概念を活性化する、アスパラガス)、したがって、回避することがshoud。

そして、文字列はWachstubeどうですか?「ガードルーム」(Wach-stu-be)または「ワックスチューブ」()のいずれかを意味しWachs-tu-beます。おそらく他の言語で他の例を見つけるかもしれません。すべての重要な単語を校正して、十分に音節化されたテキストを作成する際にデスクマンがサポートできる環境を提供することを目指してください。


6
Spar-gelder対Spargel-derの英語での一般的な例は、「re-cord」対「rec-ord」です(同音異義語ではなくホモグラム)。前者は動詞、後者は名詞です。アルゴリズムは、英語(ITで最もサポートされている言語の1つ)であっても、通常、これには十分にスマートではありません。
ニコラスシャンクス2013年

38
専門家交換vs専門家セックス交換をお勧めします
CJデニス

13

HTML5のように、それに気づくことは非常に重要である、<wbr>&shy; 同じことを行うことになっていません

ソフトハイフン

&shy;ソフトハイフン、つまりU + 00AD:SOFT HYPHENです。例えば、

innehålls&shy;förteckning

としてレンダリングされるかもしれません

innehållsförteckning

またはとして

innehålls-
förteckning

現在のところ、ソフトハイフンはFirefox、Chrome、Internet Explorerで機能します。

wbr要素

wbr要素は、改行が発生した場合にハイフンを表示しませんワードブレークチャンスです。例えば、

ABCDEFG<wbr/>abcdefg

としてレンダリングされるかもしれません

ABCDEFGabcdefg

またはとして

ABCDEFG
abcdefg

現在、この要素はFirefoxとChromeで機能します。


4

ゼロ幅スペースエンティティの代わりに使用することができ<wbr>、ほぼすべてのプラットフォーム上で確実にタグ。

&#8203;

ジョイナーエンティティという単語も役立ちます。これは、区切りを禁止するために使用できます。(区切りが必要な場所を除いて、単語の各文字の間に挿入します。)

&#8288;

これらの2つを使用すると、何でも実行できます。


1
ゼロ幅のスペース(ZWSP、U + 200B、&#8203;)は、正確に何を<wbr>したか(iirc;しばらくの間)ですが、よりよくサポートされています(普遍的には、今日)。これは、壊れた単語にハイフンを追加しないため、まさに私が探していたものです。たとえば、s/,/,\&#8203;/g置換を実行するときに、コンマ区切りの値を折り返すことができます。
Adam Katz

2

これは、クライアントで実行され、jQueryを使用して少し前に見ていたクロスブラウザソリューションです。

(function($) { 
  $.fn.breakWords = function() { 
    this.each(function() { 
      if(this.nodeType !== 1) { return; } 

      if(this.currentStyle && typeof this.currentStyle.wordBreak === 'string') { 
        //Lazy Function Definition Pattern, Peter's Blog 
        //From http://peter.michaux.ca/article/3556 
        this.runtimeStyle.wordBreak = 'break-all'; 
      } 
      else if(document.createTreeWalker) { 

        //Faster Trim in Javascript, Flagrant Badassery 
        //http://blog.stevenlevithan.com/archives/faster-trim-javascript 

        var trim = function(str) { 
          str = str.replace(/^\s\s*/, ''); 
          var ws = /\s/, 
          i = str.length; 
          while (ws.test(str.charAt(--i))); 
          return str.slice(0, i + 1); 
        }; 

        //Lazy Function Definition Pattern, Peter's Blog 
        //From http://peter.michaux.ca/article/3556 

        //For Opera, Safari, and Firefox 
        var dWalker = document.createTreeWalker(this, NodeFilter.SHOW_TEXT, null, false); 
        var node,s,c = String.fromCharCode('8203'); 
        while (dWalker.nextNode()) { 
          node = dWalker.currentNode; 
          //we need to trim String otherwise Firefox will display 
          //incorect text-indent with space characters 
          s = trim( node.nodeValue ).split('').join(c); 
          node.nodeValue = s; 
        } 
      } 
    }); 

    return this; 
  }; 
})(jQuery); 

2

を使用することをお勧めしますwbr。そのため、コードは次のように記述できます。

<p>这里有一段很长,很长的<wbr
></wbr>文字;这里有一段</p>

&shy;改行によって作成されたスペースは停止しませんが、文字間のスペースをリードしません。


2

この問題を解決するために、いくつかのデスクトップおよびモバイルブラウザーでソフトハイフンUnicode文字を正常に使用しました。

Unicodeシンボルは\u00AD、PythonのUnicode文字列に挿入するのが非常に簡単s = u'Языки и методы програм\u00ADми\u00ADро\u00ADва\u00ADния'です。

その他の解決策は、ユニコード文字自体を挿入することです。ソース文字列は、Sublime Text、Kate、Geanyなどのエディターで完全に普通に見えます(カーソルは見えないシンボルを感じます)。

社内ツールの16進エディターは、このタスクを簡単に自動化できます。

簡単なクラッジは、¦コピーや貼り付けが簡単な、のような希少で目に見える文字を使用し、たとえばのフロントエンドスクリプトを使用して、ソフトハイフンに置き換えること$(document).ready(...)です。のようなソースコードs = u'Языки и методы про¦гра¦м¦ми¦ро¦ва¦ния'.replace('¦', u'\u00AD')は、よりも読みやすいですs = u'Языки и методы про\u00ADг\u00ADра\u00ADм\u00ADми\u00ADро\u00ADва\u00ADния'



0

運が悪くてもJSF 1を使用する必要がある場合、唯一の解決策は&#173 ;,&shy;を使用することです。動作しません。


0

<wbr>と&shy;

現在は両方を使用できます。

<wbr>破壊するために使用し、詳細情報を入力しません。

例、リンクの表示に使用:

 https://stackoverflow.com/questions/226464/soft-hyphen-in-html-wbr-vs-shy

&シャイ; 必要に応じて、この時点でテキストは分割され、ハイフンが追加されます。

例:

「Éim&shy; pos&shy;sí&shy; vel pa&shy; ra um ho&shy; mem a&shy; pren&shy; der a&shy; qui&shy; lo que ele acha quejása&shy; be。」

div{
  max-width: 130px;
  border-width: 2px;
  border-style: dashed;
  border-color: #f00;
  padding: 10px;
}
<div>https://<wbr>stackoverflow.com<wbr>/questions/226464<wbr>/soft-hyphen-in-<wbr>html-wbr-vs-shy</div>

<div>É im&shy;pos&shy;sí&shy;vel pa&shy;ra um ho&shy;mem a&shy;pren&shy;der a&shy;qui&shy;lo que ele acha que já sa&shy;be.</div>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.