Line breaks and/or hiding the overflow for long URLs - html

Question

So after hours of searching I cannot find a simple solution to this problem. I run a website, and am very limited in my self taught HTML and CSS coding. My site runs Wordpress as the foundation, and when making a post, sometimes we put in long URLs. Often times those long URLs extend outside of the boundaries of the actual post, and push into the sidebar widgets, and even sometimes extending the entire page so that there is a scroll bar. Like I said my knowledge of coding is relatively limited, and I'm looking for a simple solution to fix this problem quickly. I don't want a long drawn out way to do it, as I will likely have to implement them on a daily basis. So let me know what you think about the solutions. I've read a couple things about word-wrap and but I'm just not grasping it. Please somebody who knows what they're doing explain a solution to this using HTML in terminology that anybody could understand.
Thanks in advance.

Answer 1

Here's a little look at a few things you can do, and what effect they'll have:
http://jsfiddle.net/fW5bF/
In the first case, the paragraph has a set width, but the content is too long, and therefore it's height expands to enclose all the text. Notice that the text is broken up into separate lines where the white space is.
In the second case, I've used white-space: nowrap; to prevent the text from being broken up into multiple lines. This causes the text to overflow the boundaries of the paragraph element.
I then hide this overflow using overflow: hidden;.
And then I use text-overflow: ellipsis; to include ellipsis indicating that there is more text, but that we ran out of space to show it.
Now we have a single really long 'word' (such as a URL) and hence there is no white space. Therefore, by default, it just overflows it's container.
You can break up a single 'word' into multiple lines using word-wrap: break-word;.
Or again, you can use overflow: hidden; to hide the overflow, and text-overflow: ellipsis; to include ellipsis.
I suggest you look up all these properties on a reference site like MDN: https://developer.mozilla.org/en-US/docs/Web/CSS

Answer 2

The css rule "word-wrap:break-word" ought to do what you are looking for.
Here's a fiddle: http://jsfiddle.net/9AZtx/ using:
p
{
outline:1px solid #ccc;
width:20em;
word-wrap:break-word;
}

Answer 3

You can use text-overflow: ellipsis:
.element {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}