CSS или JS макс. символ <h2> и заменить конец на "..."

Question

Я предполагаю, что мой заголовок в основном суммировал все.

У меня есть заголовок <h2>, и я хочу, чтобы он имел свойство максимального символа, будь то CSS или javascript, чтобы всякий раз, когда этот максимальный пределпропущен, конец заголовка заменен на ... (три точки).

Заранее большое спасибо.Пример можно посмотреть здесь: http://themeforest.net/forums/thread/now-accepting-bargain-submissions/23205 (см. Название)

PS Есть идеи, почему мне пришлось создать нового пользователя?функция входа в систему через Google не распознает моего предыдущего пользователя: (

Answer 1

Вы можете сделать это с помощью CSS, указав фиксированную ширину для элементов H2 или с помощью JavaScript:

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

Answer 2

Если использование hellip не является необходимым, вы можете рассмотреть это решение чистого CSS:

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 - это небольшой горизонтальный градиент от прозрачности до цвета фона.К сожалению, в IE есть какая-то проблема.

Answer 3

Чистый стиль javascript

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)+"...";
  }
}

Делая это с помощью CSS, вы можете установить ширину для h2 с помощью overflow: hidden