長いURLのより良いラインブレーク

CSS-Tricksは以前にあふれるテキストの処理に対処していましたが、長いURLの包括的なソリューションは依然として不足しています。 Chris Coyierの2012年と2018年の記事（「長い単語とURLの取り扱い」と「ラインブレイクが複雑である」）は貴重な洞察を提供します。

 .dont-break-out {
  Overflow-wrap：ブレークワード;
  ワードラップ：ブレークワード;
  ワードブレイク：ブレークワード;
  ハイフン：自動;
}

ただし、これらの方法には、特に特定のスタイルガイドを順守する場合、制御されたURLの破損に必要な精度がありません。

URLラインが破損することの重要性

審美的な考慮事項は別として、一貫したURLフォーマットが重要です。シカゴスタイルマニュアルなどのスタイルガイドは、デジタル形式の寛大さを提供しますが、印刷物のURLブレイクのガイドラインを提供します。ただし、印刷出版物、PDF、オンライン履歴書などのシナリオ、または視覚的な一貫性が維持されることさえ、URLラインの切断を正確に制御することさえありません。

戦略的なURLブレイク配置

読みやすさが最重要です。シカゴスタイルに続いて、休憩は句読点に合わせる必要があります。

• コロンまたはダブルスラッシュの後（ // ）
• 単一のスラッシュ（ / ）、チルド（ ~ ）、ピリオド（ . ）、コンマ（ , ）、ハイフン（ - ）、アンダースコア（ _ ）、質問マーク（ ? ）、数字（ # ）、またはパーセントシンボル（ % ）の前
• 等しい記号（ = ）またはアンパサンド（ & ）の前または後

人工ハイフンの導入は避けてください。柔らかいハイフンは単語の休憩に有益ですが、URL内で誤って解釈される可能性があります。既存の句読点で休憩を優先します。

マスタリングラインが壊れます

要素はソリューションを提供します。それは、それを強制せずに潜在的なラインブレークを指示し、ブラウザが最適なブレークポイントを選択できるようにします。 Chris Coyierの2012年の投稿のこの例を考えてみましょう。

 <code>http://www.amazon.com/s/ref=sr_nr_i_o?rh=k:shark vacuum,i:garden&keywords=shark vacuum&ie=UTF8&qid=1327784979</code>

タグを戦略的に追加：

 http：// www。 Amazon .com / s / ref = sr _ nr _ i _o？rh = k：Shark vacuum、i：Garden＆Keywords = Shark vacuum＆ie = utf8＆qid = 1327784979

手動挿入は退屈で、自動化が必要です。正規表現を使用したJavaScript関数は、これを自動化できます。

 function formaturl（url）{
  var doubleslash = url.split（ '//'）;
  var formatted = doubleslash.map（str =>
    str.replace（/（？<after> ：）/giu、 '$ 1'）
      。交換する（/（？<before> [/~ ., \-_ ?#％]/giu、 '$ 1'）
      。交換する（/（？<beforeandafter> [=＆]）/giu、 '$ 1'）
    ）。参加する（'// '）;
  フォーマットされたreturn;
}</beforeandafter></before></after>

実装とブラウザのサポート

ライブデモは、このアプローチの有効性を紹介します。静的サイトジェネレーターとの統合により、プロセスがさらに合理化されます。主に古いIEバージョンで例外を除いて、幅広いブラウザのサポートを楽しんでいます。擬似要素と幅のゼロ幅スペースを使用したCSSの回避策は、互換性を高めます。

 WBR：{前
  コンテンツ： "\ 200b";
  ホワイトスペース：正常;
}

優先順位付けされたURLを優先すると、デザインスタイルやターゲットメディアに関係なく、ユーザーエクスペリエンスが向上します。

参照

• アンドリュー、レイチェル。 2015年。「CSSを使用した印刷用のデザイン。」 Smashing Magazine 、1月7日。https ：//www.php.cn/link/68e4593563e1b425a7717504bca103d6
• アンドリュー、レイチェル。 2018年。「2018年の印刷物の状態のガイド。」 Smashing Magazine , May 1. https://www.php.cn/link/d8001036d6702e430b8e092484444ee1
• コイエ、クリス。 2012年。 CSS-Tricks 、2012年1月30日。2018年7月25日最終修正。https ://www.php.cn/link/f4d1f9e7d8c4235ad52d48b2213cc38
• コイエ、クリス。 2018年。「ラインが壊れる場所は複雑です。関連するすべてのCSSとHTMLがあります。」 CSS-Tricks 、2018年5月9日。最終修正2020年4月24日。https ：//www.php.cn/link/a18d17349a19926e1944714f747d330d
• シカゴスタイルマニュアル。 2017。17thed。シカゴ：シカゴ大学出版局。 https://www.php.cn/link/2e3a567dcc390811e4dfa8d478e4a149
• 王子。 ND「HTMLをCSSでPDFに変換します。」 2021年2月25日アクセスhttps://www.php.cn/link/13d8efdc6a5cb721fe7031be062b9b74
• ユニコードコンソーシアム。 2009年。「特別なエリアとフォーマット文字。」 Unicode標準で。バージョン5.2.0。 https://www.php.cn/link/99407a87a33e79517280e0fdacdaa713
• Whatwg。 ND「HTML：Living Standard」 2021年2月25日アクセスhttps://www.php.cn/link/767d3dd25ed652d33fa7743c0c2400fa

以上が長いURLのより良いラインブレークの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。