問題タブ [css-hyphens]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
4 に答える
14509 参照

css - Firefox で CSS ハイフンが機能しない?

CSS ハイフンを使用しようとしています。それらは IE 11 と Safari では動作しますが、Firefox では正しく動作しません。その理由はわかりません。次に例を示します。

Firefox でスニペットを実行すると、単語DIAGNOSEVERFAHRENがコンテナーからはみ出して壊れません。Safari と IE では、期待どおりに壊れます。これが Firefox で機能しないのはなぜですか?

編集

Marat Tanalin's answerで指摘されているように、ハイフンが正しく機能するには lang 属性を含める必要があります。私はこれを<html>タグとして持っています:

0 投票する
1 に答える
1109 参照

css - なぜこれらの単語は変なところで途切れるのですか?

ライブサイトはこちら: http://chadfraser.com/

ご覧のとおり、モバイルで見たり、ブラウザ ウィンドウを拡大したりすると、単語が変な場所で途切れます。ハイフンを追加することもできますが、クライアントがプロのライターであり、ハイフンを必要としない場合を除きます。ただし、それらは必要ありません-単語が空白で折り返されない理由がわかりません。

任意の考えをいただければ幸いです。

0 投票する
1 に答える
53 参照

html - 相対的なサイズの要素の改行

これに対する解決策を見つけるのに非常に苦労しましたが、何もうまくいかないようです。location 要素の単語は改行されず、改行されません。word-wrap:break-all |break-word と現在の版のすべてを試しました。長い行を小さな行に分割するものはないようです。 https://jsfiddle.net/k5VET/2431/

0 投票する
0 に答える
74 参照

html - 見た目のコントロールは可能?

単語ラッパーの幅に応じて、ソフト ハイフンが単語を分割するさまざまな方法があることを発見しました。

JSFiddleの例は、これを明確に示しています。

最初の 2 つの単語 (例) は私が期待しているように見えますが、最後の 2 つの単語は私には謎です。単語の最後にダッシュが付いて表示される理由を誰か教えてもらえますか?&shy;

編集: Oriol が指摘しているように、ブラウザーや環境が異なれば、異なるビューが生成されます。ここに私が見るものの写真があります:

ここに画像の説明を入力

0 投票する
1 に答える
126 参照

python - シャイタグの問題でフィルターセーフが機能しない

Django テンプレートの適切な場所で単語を分割することに問題があります。安全&shy; にフィルタリングしようとしているようですが、うまくいきません。

これが私のコードです:

0 投票する
2 に答える
419 参照

css - Chrome 55.0.2883.95 での CSS ハイフンの動作の変更

「ハイフン」を「自動」に設定すると、「空白: nowrap」よりも優先されるようになりました。以前のバージョンの Chrome (Mac では 54 より前) およびその他のブラウザー (FF、Safari、IE) では、「空白: nowrap」がハイフンを上回っているようです。したがって、white-space: nowrap および text-overflow: ellipsis を指定すると、ハイフンの設定に関係なく、テキストが省略記号で切り捨てられることがわかります。

55.0.2883.95(Mac版)からは、ハイフン:オートで空白:ナウラップを指定しても改行するようです。ハイフンとナウラップを同時に指定するのはばかげているように聞こえることに同意します..しかし、これは「新しい」動作であるため、これがバグなのか意図された動作なのかを確認したいと思います.

この問題をテストして、他のブラウザー間で動作を比較するための簡単なフィドルを作成しました。

スクリーンショット:

Mac 55.0.2883.95 (64 ビット) の Chrome

0 投票する
3 に答える
1477 参照

google-chrome - CSS の自動ソフトハイフネーション

昨年 12 月、CSS3 のHyphensサポートが Chromeに導入されたと思われます。また、他の主要なブラウザーに加えて、IE も搭載する必要があります。

更新:以下の回答を受け取り、caniuse.com の脚注を誤解していたことを理解しました。「現在のところ、Mac でのみ値をサポートしています」
と表示されます。私はこれを「Mac では、現在値のみがサポートされている」という意味と解釈しました。しかし、本当の意味は、「Mac は、現時点で値がサポートされている唯一のプラットフォームである」ということです。/アップデート。auto
auto
auto

ただし、Chrome または IE の実装に問題があります。私はいくつかの古い (そして現在はやや時代遅れの) SE の投稿 ( 123 ) を読み、残念ながら Firefox で意図した結果しか得られないjsfiddleを作成しました。

おそらく、辞書 ( ) を手動で追加しなくても、ターゲット言語であるノルウェー語 ( ) と英語 ( )の IEでハイフネーションが機能するはずです。lang="no"lang="en"hyphenate-resource

辞書なしで IE や Chrome でハイフネーションを機能させるフィドルに変更を加えることはできますか? そうでない場合、誰かがhyphenate-resourceノルウェー語に役立つことを知っていますか?

そうでない場合は、 hyperまたはhyphenatorの使用を検討する必要がありますが、ブラウザーからネイティブに取得する必要があるものについては、JavaScript の実装を避けることをお勧めします。

ここに画像の説明を入力