Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Force a line break in a URL

Tags:

html

css

I've got a Twitter feed on my blog. It's working great, but there's an issue with long URLs in tweets. Long URLs break the layout by extending past the width of the container.

My code looks like this:

<ul id="twitter_update_list">
    <!-- twitter feed -->
</ul>

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&amp;count=3"></script>

The blogger.js script contains the callback function which takes the data from the Twitter request and populates <li> elements to a predefined <ul>.

I'm using the following CSS to automatically break the line (for browsers that support it):

#twitter_update_list li span a {
    word-wrap: break-word;
}

I know about the <wbr> tag and was trying to use it with a jquery function that looked like this:

$(document).ready(function(){
    $("#twitter_update_list li span a").each(function(){
        // a replaceAll string prototype was used here to replace "/" with "<wbr>/"
    });
});

However when I tried using that snippet, it would cause IE to stop responding and that's no good.

I'm looking for a block of code I can just drop in that will fix the line break issue (by adding a line break to long URLs). Firefox and Chrome are working properly, but IE7 and IE8 need something more. (I don't care about IE6.)

like image 265
WNRosenberg Avatar asked Dec 01 '10 15:12

WNRosenberg


People also ask

How do you put a line break in a URL?

URL Line Breaks You can split a URL in the following places: After a colon or double slash (//) Before a single slash (/), period, comma, hyphen (-), underline (_), question mark, number sign (#), percent symbol (%), or tilde (~).

How do you force a line break?

Press ALT+ENTER to insert the line break.

How do you force a break in HTML?

To do a line break in HTML, use the <br> tag. Simply place the tag wherever you want to force a line break. Since an HTML line break is an empty element, there's no closing tag. Below is an HTML file with a <p> and <br> element.

How do you automatically break a line in HTML?

A solution using HTML: The tag <wbr> marks a "suggested word break", aka a position inside a word where it is ok to do a linebreak.


4 Answers

You can try using: word-break: break-all;

div {
  background: lightblue;
  border: 1px solid #000;
  width: 200px;
  margin: 1em;
  padding: 1em;
}
.break {
  word-break: break-all;
}
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate vitae fugiat fuga fugit cum <a href="" class="break">http://www.ThisLongTextBreaksBecauseItHasWordBreak-BreakAll.com</a> facere mollitia repellat hic, officiis, consequatur quam ad cumque dolorem doloribus ex magni necessitatibus, nisi accusantium.</p>
  
  <p>Voluptatibus atque inventore <a href="">http://www.looooooooooooooooooooooooooooongURL.com</a> veritatis exercitationem nihil minus omnis, quisquam earum ipsum magnam. Animi ad autem quos rem provident minus officia vel beatae fugiat quasi, dignissimos
    sapiente sint quam voluptas repellat!</p>
</div>

Just be sure of applying this only to the link. Otherwise, all other words will break too. :)

like image 140
Charlie Escoboza Garcia Avatar answered Oct 14 '22 05:10

Charlie Escoboza Garcia


Try playing with the white-space CSS property.

Check this link for more info: http://perishablepress.com/press/2010/06/01/wrapping-content/

like image 28
Nacho Avatar answered Oct 14 '22 05:10

Nacho


I believe what you're looking for are soft hyphens. This was covered by ALA a while back.

http://www.alistapart.com/articles/the-look-that-says-book/

like image 40
MikeNGarrett Avatar answered Oct 14 '22 05:10

MikeNGarrett


I know this is old post but since I ended up here with a related google search - someone else might also.

I needed to make a long url breakable, and since wasn't usable for my site (i.e not in html5 standards, and ie8 seems to ignore it)

<style>.wbr { display: inline-block; width: 0px;}</style>

Since i generated the url I was able to insert <span class="wbr">&nbsp;</span> before the slashes.

So I ended up with :

www.example.com<span class="wbr">&nbsp;</span>/somepath<span class="wbr">&nbsp;</span>/blah.php

which looks normal in the browser but allows from word wraping at the / marks

www.example.com/somepath/blah.php

Hope that helps the next person who visits

like image 37
Terre Porter Avatar answered Oct 14 '22 05:10

Terre Porter