9

タイトルが示すように、レスポンシブ サイトを構築しているときに、長い (っぽい) URL が流動的なグリッドを壊し、小さなデバイスで水平スクロールを引き起こすという問題に遭遇することがよくあります。それらは 1 つの長い文字列であるため、コンテナーの幅をラップしてデバイスの幅よりも広くすることはありません...

 <--device-->
______________
|             |
| http://longurlthatdoesntfit.com
|             |
|             |

コンテナを作成することもありoverflow:hiddenますが、それでは URL の末尾が切り落とされるだけで、グリッチが発生してロックされる傾向があります。別のアプローチとして、小さいデバイスでフォント サイズを縮小することも考えられますが、URL の長さが異なる状況では、常に十分なスペースを確保するために縮小することになります。

もっと良い方法があるはずです。

4

3 に答える 3

15

オーバーフローの非表示もスクロールもうまくいかない場合は、CSS で強制的にワードラップすることを検討してください。

word-wrap: break-word;
于 2013-08-10T00:59:16.490 に答える
6

word-wrap: break-word; を追加してみてください。あなたのグリッドスタイルに。

<div style="word-wrap: break-word;">
  <a href="#">http://www.extraverylongurlthatdoesntfit.com</a>
</div>
于 2013-08-10T01:02:36.480 に答える