2013-04-05 7 views
29

CSSスタイルword-wrap: break-word;で動作する、常に見えないオプションの改行文字が必要です。常に表示されない改行HTMLエンティティ

ここにいくつかの詳細があります。私の目標は、合理的な場所で長いリンクを分割することです。これらの文字は、開始するには良い場所です:-._/\。これはRailsの固有の問題ではありませんが、私は私が今使っているいくつかのコードを共有したいと思った:

module ApplicationHelper 
    def with_optional_line_breaks(text) 
    text.gsub(%r{([-._/\\])}, '\1­') 
    end 
end 

ここで、上記のコードに問題があります:­は(とテーブルに:word-wrap: break-word;)効果を取るとき、 ­-と表示されます。私は-を見たくない。私は、文字が表示されていない改行が必要です。


+0

この場合、簡単な
タグは機能しませんか? –

+0

@Christopher: '
'は省略可能な改行ではありません –

+0

この回答は役に立つかもしれません。文字ではなく、スパンを使用します。 http://stackoverflow.com/questions/5392853/html-css-denoting-a-preferred-place-for-a-line-break – Unrelated

答えて

47

​は、ゼロ幅スペース(ZWSP)と呼ばれるユニコード文字のHTMLエンティティです。

「HTMLページでは、このスペースは<wbr>タグに代わるものとして、長い単語の潜在的な改行として使用することができます。」 - Zero-width space - Wikipedia

<wbr>タグも動作しますが、前述のようにAaron's answer。私はエンティティがよりシンプルに見えるので、このHTMLエンティティをタグよりも好むと思う:ユニコードがそれを処理し、ウェブブラウザではない。

+2

Unicodeがそれを処理しますが、WebブラウザはUnicode標準に準拠する必要はなく、この特定の文字をサポートする必要はありません。これは厄介な問題ですが、一般的に、ZWSPはかなり古いブラウザでのみ失敗しますが、 ' 'では新しいブラウザでも奇妙な点があります。 http://www.cs.tut.fi/~jkorpela/html/nobr.html –

+1

@David、見えないセパレータはどうですか? http://www.fileformat.info/info/unicode/char/2063/indexを参照してください。htm – Pacerier

+0

@Pacerierこれは、http://unicode.org/cldr/utility/list-unicodeset.jsp?a=[:subhead=Invisible%20operators:]のコンテキストを考えると、数学的な空白を対象としているようです。 http://www.fileformat.info/info/unicode/char/2063/index.htmから:「隣接する数学記号がリストを形成することを示す連続演算子、例えば、複数のインデックス間に目に見えるコンマがない場合」。 –

4

<wbr>は、それがそのことについて、あなたは何をしたいしかし、それはそれをサポートするように見える、と&shy;を行うように、見えますvery inconsistentです。残念ながら、あなたが望むことを行うには特に良い方法はないかもしれません。

+2

ありがとうございました。注:矛盾するブラウザのサポートは2008年からのものです。私のシステムでは、現代のブラウザ(Firefox、Safari、Chrome)は ''で正しいことを行います。私は彼らが他の単語/行分割方法でも働くことを期待しています。 [Soft hyphen(SHY) - ハードな問題?](http://www.cs.tut.fi/~jkorpela/shy.html) –

+0

ここでは、ハイフネーション/改行/分割技法:https://stackoverflow.com/a/28672471/3439786 さらに、_caniuse_ページもあります。http://caniuse.com/#feat=wbr-element – Dennis98

+0

1つの利点幅がゼロのスペースのUnicodeエンティティに対する ""の値は、(リンクではないWebページへの学術参照を提供する場合など)ブラウザからコピーされる可能性のあるURLである場合、 Unicodeエンティティが(少なくともMacOSでは)コピーされ、結果のURLはブラウザでは正しいように見えますが、アクセスしようとすると壊れます。 ''にはこの問題はありません。 – theJBRU

関連する問題