jamo

Which Browsers Can Line-Wrap Long Links

May 22nd, 2013
174
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.50 KB | None | 0 0
  1. <!--- 5/22/2013 --->
  2. <p>Some links are really long.  What happens to the anchor text when a browser window is resized?</p>
  3.  
  4. <p><b>Firefox 21 (Windows):</b> Wraps strings with lots of consecutive characters<br>
  5. <b>Opera 12.15 (Windows):</b> Wraps strings with lots of consecutive characters<br>
  6. <b>Safari 5.1.7 (Windows):</b> Doesn't wrap text<br>
  7. <b>Chrome 27.0.1453.93 m (Windows):</b> Doesn't wrap text<br>
  8. <b>Internet Explorer 10.0.9200.16580:</b> Doesn't wrap text</p>
  9.  
  10. <p><a href="#">http://www.test.com/this-is-a-long-url/and-it-just-keeps-getting-longer/will-it-be-line-wrapped/lets-make-it-a-little-longer/some-browser-may-break-design-or-truncate-text<p>
  11.  
  12. <p><a href="#">http://www.test.com/this_is_another_long_url/and_it_just_keeps_getting_longer/will_it_be_line_wrapped/lets_make_it_a_little_longer/some_browser_may_break_design_or_truncate_text<p>
  13.  
  14. <hr>
  15. <h2>Possible Solution</h2>
  16. <p>Add spaces to the displayed text and use CSS to compress the space</p>
  17. <style type="text/css">
  18. a > i {display:inline-block; white-space:pre-line;}
  19. </style>
  20. <p><a href="">http://www.test.com/<i> </i>this-is-a-long-url/<i> </i>and-it-just-keeps-getting-longer/<i> </i>will-it-be-line-wrapped/<i> </i>lets-make-it-a-little-longer/<i> </i>some-browser-may-break-design-or-truncate-text<p>
  21.  
  22. <p><a href="">http://www.test.com/<i> </i>this_is_another_long_url/<i> </i>and_it_just_keeps_getting_longer/<i> </i>will_it_be_line_wrapped/<i> </i>lets_make_it_a_little_longer/<i> </i>some_browser_may_break_design_or_truncate_text<p>
Advertisement
Add Comment
Please, Sign In to add comment