Вставьте многоточие (...) в тег HTML, если содержимое слишком широкое

Question

У меня есть веб-страница с эластичным макетом, которая меняет свою ширину при изменении размера окна браузера.

В этом макете есть заголовки (h2), которые будут иметь переменную длину (на самом деле заголовки из постов блога, которые я не могу контролировать). В настоящее время - если они шире окна - они разбиты на две строки.

Существует ли элегантное, протестированное (кросс-браузерное) решение - например, с jQuery - которое сокращает innerHTML этого тега заголовка и добавляет «...», если текст будет слишком широким, чтобы поместиться в одну строку текущий экран / ширина контейнера?

Answer 1

Ну, одно простое решение, которое не совсем добавляет "...", но предотвращает разбиение

на две строки, это добавление этого бита css: h2 { height:some_height_in_px; /* this is the height of the line */ overflow:hidden; /* so that the second (or third, fourth, etc.) line is not visible */ } Я еще об этом подумал, и я придумал это решение, вы должны обернуть текстовое содержимое вашего тега h2 другим тегом (например, span) (или альтернативно обернуть h2s чем-то, имеющим заданную высоту). ) и затем вы можете использовать этот вид JavaScript для отфильтровывания ненужных слов: var elems = document.getElementById('conainter_of_h2s'). getElementsByTagName('h2'); for ( var i = 0, l = elems.length; i < l; i++) { var span = elems.item(i).getElementsByTagName('span')[0]; if ( span.offsetHeight > elems.item(i).offsetHeight ) { var text_arr = span.innerHTML.split(' '); for ( var j = text_arr.length - 1; j>0 ; j--) { delete text_arr[j]; span.innerHTML = text_arr.join(' ') + '...'; if ( span.offsetHeight <= elems.item(i).offsetHeight ){ break; } } } }

Answer 2

Вот еще одно решение JavaScript. Работает очень хорошо и очень быстро.

https://github.com/dobiatowski/jQuery.FastEllipsis

Проверено на Chrome, FF, IE на Windows и Mac.

Answer 3

Существует решение для многострочного текста с чистым CSS. Он называется line-clamp, но работает только в браузерах webkit. Однако есть способ имитировать это во всех современных браузерах (все более поздние, чем в IE8). Кроме того, он будет работать только на сплошном фоне, потому что вам нужно фоновое изображение, чтобы скрыть последние слова последней строки. Вот как это происходит:

Учитывая этот HTML:

<p class="example" id="example-1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Вот CSS:

p {
    position:relative;
    line-height:1.4em;
    height:4.2em;      /* 3 times the line-height to show 3 lines */
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    background:url(ellipsis_bg.png) repeat-y;
}

ellipsis_bg.png - изображение того же цвета, что и фон, оно будет иметь ширину около 100 пикселей и иметь такую ​​же высоту, что и высота строки.

Это не очень красиво, так как ваш текст может быть вырезан в середине буквы, но в некоторых случаях это может быть полезно.

Ссылка: http://www.css -101.org / Articles / Line-Clamp / Line-Clamp_for_non_webkit-based_browsers.php

Answer 4

Существует простое решение jQuery от Девон Говетт :

https://gist.github.com/digulla/5796047

Чтобы использовать, просто вызовите ellipsis () для объекта jQuery. Например:

$ ( "оболочка") многоточие ();.

Answer 5

Это похоже на Алекс, но делает это во время регистрации, а не линейно, и принимает параметр maxHeight.

jQuery.fn.ellipsis = function(text, maxHeight) {
  var element = $(this);
  var characters = text.length;
  var step = text.length / 2;
  var newText = text;
  while (step > 0) {
    element.html(newText);
    if (element.outerHeight() <= maxHeight) {
      if (text.length == newText.length) {
        step = 0;
      } else {
        characters += step;
        newText = text.substring(0, characters);
      }
    } else {
      characters -= step;
      newText = newText.substring(0, characters);
    }
    step = parseInt(step / 2);
  }
  if (text.length > newText.length) {
    element.html(newText + "...");
    while (element.outerHeight() > maxHeight && newText.length >= 1) {
      newText = newText.substring(0, newText.length - 1);
      element.html(newText + "...");
    }
  }
};

Answer 6

Многострочный многоточечный чистый CSS для текстового содержимого:

.container{
    position: relative;  /* Essential */
    background-color: #bbb;  /* Essential */
    padding: 20px; /* Arbritrary */
}
.text {
    overflow: hidden;  /* Essential */
    /*text-overflow: ellipsis; Not needed */
    line-height: 16px;  /* Essential */
    max-height: 48px; /* Multiples of line-height */
}
.ellipsis {
    position: absolute;/* Relies on relative container */
    bottom: 20px; /* Matches container padding */
    right: 20px; /* Matches container padding */
    height: 16px; /* Matches line height */
    width: 30px; /* Arbritrary */
    background-color: inherit; /* Essential...or specify a color */
    padding-left: 8px; /* Arbritrary */
}

<div class="container">
    <div class="text">
        Lorem ipsum dolor sit amet, consectetur eu in adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
    </div>
    <div class="ellipsis">...</div>
</div>

Пожалуйста, проверьте фрагмент для живого примера.

Answer 7

Я не смог найти сценарий, который работал бы точно так, как я хотел, так же, как и мой собственный для jQuery - довольно много опций, которые можно было бы установить в будущем:)

https://github.com/rmorse/AutoEllipsis

Answer 8

Вы можете сделать это намного проще только с помощью css, например: sass mode

.truncatedText {
   font-size: 0.875em;
   line-height: 1.2em;
   height: 2.4em; // 2 lines * line-height
   &:after {
      content: " ...";
   }
}

и у вас есть многоточие;)

Answer 9

Вот хорошая библиотека виджетов / плагинов со встроенным многоточием: http://www.codeitbetter.co.uk/widgets/ellipsis/ Все, что вам нужно сделать, это обратиться к библиотеке и вызвать следующее:

<script type="text/javascript"> 
   $(document).ready(function () { 
      $(".ellipsis_10").Ellipsis({ 
         numberOfCharacters: 10, 
         showLessText: "less", 
         showMoreText: "more" 
      }); 
   }); 
</script> 
<div class="ellipsis_10"> 
   Some text here that's longer than 10 characters. 
</div>

Answer 10

Я переписал функцию Алекса для использования в библиотеке MooTools. Я изменил его немного на переход слова, а не добавил многоточие в середине слова.

Element.implement({
ellipsis: function() {
    if(this.getStyle("overflow") == "hidden") {
        var text = this.get('html');
        var multiline = this.hasClass('multiline');
        var t = this.clone()
            .setStyle('display', 'none')
            .setStyle('position', 'absolute')
            .setStyle('overflow', 'visible')
            .setStyle('width', multiline ? this.getSize().x : 'auto')
            .setStyle('height', multiline ? 'auto' : this.getSize().y)
            .inject(this, 'after');

        function height() { return t.measure(t.getSize).y > this.getSize().y; };
        function width() { return t.measure(t.getSize().x > this.getSize().x; };

        var func = multiline ? height.bind(this) : width.bind(this);

        while (text.length > 0 && func()) {
            text = text.substr(0, text.lastIndexOf(' '));
            t.set('html', text + "...");
        }

        this.set('html', t.get('html'));
        t.dispose();
    }
}
});