CSS or JS max. character <h2> and replace end with "..."

Question

Hey
I assume my title basically summed it all up.

I have a <h2> title, and I want it to have a max character property, be it CSS or javascript, so that whenever this maximum limit is passed, the title's end is replaced by ... (three dots).

Thank you very much in advance.
An example can be viewed here: http://themeforest.net/forums/thread/now-accepting-bargain-submissions/23205 (see the title)

P.S. Any idea why I had to create a new user? the login-feature through google doesn't recognize my previous user :(

Answer 1

Pure javascript style

var maxLen = 30;
var titles = document.getElementsByTagName("h2");
for(i in titles){
  if(titles[i].innerHTML.length > maxLen){
    titles[i].innerHTML = titles[i].innerHTML.substr(0, maxLen)+"...";
  }
}

Doing this by CSS you could set width for h2 with overflow: hidden

Answer 2

You can do it with CSS by specifying a fixed width for H2 elements, or width JavaScript:

function shorten() {
    maxlength = 20;
    h2 = document.getElementsByTagName('h2');
    for (i = 0; i < h2.length; i++) {
        title = h2[i].innerText;
        if (title.length > maxlength) {
            h2[i].innerHTML = title.substr(0, maxlength) + "&hellip;";
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", shorten);

Answer 3

If using a hellip is not necessary, you can consider this pure-css solution:

h2 {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
}

h2:before {
    content: " "; /* unicode space Alt+255 */
    display: block;
    background: url(shadow.png) top right repeat-y;
    height: 100%;
    width: 20px;
    float: right;
    position: relative;
}

shadow.png is small horizontal gradient from transparency to your background color. Unfortunately, there is some problem in IE.