Можно ли использовать текстовое переполнение: многоточие в многострочном тексте?

Ответ 1

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

Я нашел text-overflow: -o-ellipsis-lastline, но он работает только в Opera: http://people.opera.com/dstorey/text/text-overflow.html (mirror: http://jsbin.com/exugux/)

Также существует аналогичное решение для WebKit: http://dropshado.ws/post/1015351370/webkit-line-clamp

Ответ 2

Вы можете сделать это с помощью css. Он работает только в браузерах webkit, но имеет резерв для других.

использовать:

display: -webkit-box;
-webkit-line-clamp: $lines-to-show;
-webkit-box-orient: vertical;
height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */

вместе с:

max-width: $maxwidth;
overflow: hidden;
text-overflow: ellipsis;

Вот скрипка: демо

Ответ 3

Я публикую это, потому что считаю, что мое решение менее сложное, чем популярное, в котором используются псевдоэлементы и поведение float. Недавно мне пришлось создать решение, которое будет работать в IE7, поэтому псевдо-элементы в первую очередь не были вариантом.

Метод включает в себя 4 элемента:

• Контейнер уровня блока, который определяет максимальную высоту содержимого
• Встроенная обертка для текстового содержимого
• Эллипсис, содержащийся внутри встроенной оболочки
• Элемент "fill", также внутри встроенной оболочки, который перекрывает многоточие, когда текстовое содержимое не превышает размеры контейнера.

Как и в предыдущих решениях только для CSS, техника требует наличия сплошного цветного фона или фонового изображения фиксированной позиции для содержимого: эллипсис должен скрывать части текста, а заливка должна скрывать многоточие. Вы можете сделать эффектный эффект градиента, чтобы текст исчезал в многоточие, но я оставлю эту косметическую деталь на усмотрение.

Структура HTML

<!-- The block level container. `clamped-2` for 2 lines height -->
<p class="clamped clamped-2">
  <!-- The inline wrapper -->
  <span class="text">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
    lobortis nisl ut aliquip ex ea commodo consequat.
    <!-- The ellipsis, which can contain anything you want - 
         (a 'more' link, for example) -->
    <span class="ellipsis">
      &#133;
    </span>
    <!-- The fill, which covers the ellipsis when the text doesn't overflow -->
    <span class="fill"></span>
  </span>
</p>

CSS

body {
  /* We need a solid background or background-position: fixed */
  background: #fff;
  /* You'll need to know the line height to clamp on line breaks */
  line-height: 1.5;
}

.clamped {
  overflow: hidden;
  position: relative;
}

/* Clamp to 2 lines, ie line-height x 2:
   Obviously any number of these classes can be written as needed
 */
.clamped-2 {
  max-height: 3em;
}

/* The ellipsis is always at the bottom right of the container,
   but when the text doesn't reach the bottom right...
 */
.clamped .ellipsis {
  background: #fff;
  bottom: 0;
  position: absolute;
  right: 0;
}

/* ...It obscured by the fill, which is positioned at the bottom right 
   of the text, and occupies any remaining space.
 */
.clamped .fill {
  background: #fff; 
  height: 100%;
  position: absolute;
  width: 100%;
}

Здесь скрипка, демонстрирующая это: измените размер браузера или измените текст, чтобы увидеть, что он смещается от многоточия к не-эллипсису.

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

Ответ 4

Я написал функцию javascript, чтобы исправить проблему многострочной эллипсис

function ellipsizeTextBox(id) {

    var el = document.getElementById(id);
    var keep = el.innerHTML;
    while(el.scrollHeight > el.offsetHeight) {
        el.innerHTML = keep;
        el.innerHTML = el.innerHTML.substring(0, el.innerHTML.length-1);
        keep = el.innerHTML;
        el.innerHTML = el.innerHTML + "...";
    }   
}

надеюсь, что это поможет!

Ответ 5

Изменена функция user1152475, поэтому она работает слово за словом (пробел), а не символ по символу.

function ellipsizeTextBox(id) {
    var el = document.getElementById(id);
    var wordArray = el.innerHTML.split(' ');
    while(el.scrollHeight > el.offsetHeight) {
        wordArray.pop();
        el.innerHTML = wordArray.join(' ')  + '...';
    }   
}

Примечание. Для обоих решений окно должно иметь высоту набора.

Ответ 6

HTML не предлагает такой функции, и это очень расстраивает.

Вот почему я разработал небольшую библиотеку для решения этой проблемы. Библиотека предоставляет объекты для моделирования и выполнения текстового рендеринга на уровне букв. Это должно делать только то, что вам нужно:

Подробнее о http://www.samuelrossille.com/home/jstext для скриншота, учебника и ссылки на dowload.

Ответ 7

Как указывалось ранее, есть странный способ сделать это с помощью webkit-box, размещенного Дэвидом ДеСандро:

  elements_to_style {
      display: -webkit-box;
      overflow : hidden;
      text-overflow: ellipsis
      -webkit-line-clamp: number_of_lines_you_want;
      -webkit-box-orient: vertical;
  }

link http://dropshado.ws/post/1015351370/webkit-line-clamp

Ответ 8

на всякий случай, если кто-то достигнет здесь, может это решение для вас? чистый css-браузер. http://codepen.io/issactomatotan/pen/LkJbjO

<div style="position:relative;width:100%;max-height:40px;overflow:hidden;font-size:16px;line-height:20px;border:1px solid red;">
<p class="pp">asd asdasd asd asd asdasd a asdasd a sdasd asdasd asdaasd asd asd d asasas das dasdd asddasd asdasd asdsdasd asd<span class="bb"></span></p>

Ответ 9

Я нашел решение для многострочного кроссбраузерного чистого эллипса CSS. Я пробовал много решений, и только этот был разработан только с использованием CSS. У меня был div с динамической шириной и должен был установить высоту.

Здесь ссылка: http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/

Ответ 10

Я воспользовался большинством этих решений, и лучше всего использовать сплошной плагин clamp.js. Он работает во всех средах и имеет минимальный размер (3K).

Ответ 11

Эй, вы можете сделать это так, используя css.

Для Chrome и Safari

.block-with-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
}

Для Firefox и Internet Explorer

* styles for '...' */ 
.block-with-text {
  /* hide text if it more than N lines  */
  overflow: hidden;
  /* for set '...' in absolute position */
  position: relative; 
  /* use this value to count block height */
  line-height: 1.2em;
  /* max-height = line-height (1.2) * lines max number (3) */
  max-height: 3.6em; 
  /* fix problem when last visible word doesn't adjoin right side  */
  text-align: justify;  
  /* place for '...' */
  margin-right: -1em;
  padding-right: 1em;
}
/* create the ... */
.block-with-text:before {
  /* points in the end */
  content: '...';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of block */
  right: 0;
  bottom: 0;
}
/* hide ... if we have text, which is less than or equal to max lines */
.block-with-text:after {
  /* points in the end */
  content: '';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of text */
  right: 0;
  /* set width and height */
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  /* bg color = bg color under block */
  background: white;
}

Ответ 12

.minHeightg{
height:5.6rem !important;
  width:20%;
}
.productOverflow
{
     overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   line-height: 16px;     /* fallback */
   max-height: 3.6rem;      /* fallback */
   -webkit-line-clamp: 3; /* number of lines to show */
   -webkit-box-orient: vertical;
}



/*firefox*/
@-moz-document url-prefix() {
   
   .productOverflow
{
   overflow: hidden;
   text-overflow:ellipsis;
   display: -moz-box !important;
   
   line-height: 16px;     /* fallback */
   max-height: 3.6rem;      /* fallback */
   -moz-line-clamp: 3; /* number of lines to show */
   -moz-box-orient: vertical;
}

<div class="minHeightg">
    <p class="productOverflow">Some quick example text to build on the card title .</p>
    </div>