Need help/suggestions to set max-width of 1st line of h1 to avoid overlapping absolutely positioned element

Below is what my design looks like

however with a long title, it looks like

开发者_开发问答

How might I avoid the overlap? I created a fiddle to allow you to work on this (if you prefer)

http://jsfiddle.net/xhp7Q/

---

You can put the comment link first and float it to the right. That way the header will flow around it:

http://jsfiddle.net/xhp7Q/1/

.comments {
  float: right;
  height: 30px;
  font-size: 26px;
  font-weight: bold;
  border: 5px solid #eee;
  color: #000;
  color: red;
}

---

Just change position:absolute; to position:relative; in .comments and add float:right;

Then move this:

<a href="#" class="comments">10</a>

To the top of the p and h1 elements:

Demo