В CSS используйте «…» для переполненного блока из нескольких строк


303

с участием

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

«...» будет показано в конце строки, если переполнено. Однако это будет показано только в одной строке. Но я бы хотел, чтобы это было показано в несколько строк.

Это может выглядеть так:

+--------------------+
|abcde feg hij   dkjd|
|dsji jdia js ajid  s|
|jdis ajid dheu d ...|/*Here it's overflowed, so "..." is shown. */
+--------------------+

3
Если это каждая отдельная строка, вам действительно нужно беспокоиться о том, чтобы сделать одну строку и повторить функциональность для каждой строки. Если все эти строки принадлежат одному и тому же предложению, вы, вероятно, должны держать многоточие только в последней строке. Если вы используете многоточие на полпути в предложении, вы по сути делаете дыру в своем предложении.
Wex


4
хорошая статья на эту тему css-tricks.com/line-clampin
Adrien Be

Пожалуйста, смотрите следующую ссылку для моего ответа: stackoverflow.com/questions/536814/…
Shishir Arora

Я ответил на это очень подробно с помощью чистого CSS-решения . Работает надежно. Как уже упоминалось в этом ответе, этого гораздо проще достичь с помощью Javascript, но если это не обсуждается, это работает .
Дашард

Ответы:


84

Есть также несколько плагинов jquery, которые решают эту проблему, но многие не обрабатывают несколько строк текста. Следующие работы:

Там также некоторые тесты на соответствие .


57
Я не видел ни одного чистого решения css для этого требования
Джим Томас

@Ovilia: обратите внимание, что решение Джима также включает в себя плагин jQuery под названием jquery.autoellipsis.js, вам придется отдельно загрузить это включение
Джефф

7
CSS многострочный учебник по элипсису: mobify.com/dev/multiline-ellipsis-in-pure-css
Julien

2
Уважаемые люди из будущего: этот плагин мой любимый, так как он позволяет переключать отображение скрытого текста. http://keith-wood.name/more.html
brichins

1
Все библиотеки, которые я добавил, хороши. Тесты производительности могут помочь вам принять решение, но я хотел бы отметить, что мы обычно внедряем dotdotdot из-за его широкого диапазона конфигурации и чистого кода - его легко изменить. (Обратите внимание, это всего лишь личная точка зрения, которая не относится к ответу.)
Милан Ярош

58

Я взломал, пока мне не удалось достичь чего-то близкого к этому. Это идет с несколькими оговорками:

  1. Это не чистый CSS; Вы должны добавить несколько элементов HTML. Однако JavaScript не требуется.
  2. Многоточие выравнивается по правому краю на последней строке. Это означает, что если ваш текст не выровнен по правому краю или не выровнен, может быть заметный разрыв между последним видимым словом и многоточием (в зависимости от длины первого скрытого слова).
  3. Место для многоточия всегда зарезервировано. Это означает, что если текст помещается в поле почти точно, он может быть излишне обрезан (последнее слово скрыто, хотя технически это не нужно).
  4. Ваш текст должен иметь фиксированный цвет фона, так как мы используем цветные прямоугольники, чтобы скрыть многоточие в тех случаях, когда это не нужно.

Следует также отметить, что текст будет разбит на границе слова, а не на границе символа. Это было преднамеренно (поскольку я считаю, что это лучше для более длинных текстов), но поскольку это отличается от того text-overflow: ellipsis, что делает, я подумал, что должен упомянуть об этом.

Если вы можете жить с этими предостережениями, HTML выглядит следующим образом:

<div class="ellipsify">
    <div class="pre-dots"></div>
    <div class="dots">&hellip;</div>
    <!-- your text here -->
    <span class="hidedots1"></span>
    <div class="hidedots2"></div>
</div>

И это соответствующий CSS, на примере блока шириной 150 пикселей с тремя строками текста на белом фоне. Предполагается, что у вас есть сброс CSS или аналогичный, который устанавливает поля и отступы в ноль, где это необходимо.

/* the wrapper */
.ellipsify {
    font-size:12px;
    line-height:18px;
    height: 54px;       /* 3x line height */
    width: 150px;
    overflow: hidden;
    position: relative; /* so we're a positioning parent for the dot hiders */
    background: white;
}

/* Used to push down .dots. Can't use absolute positioning, since that
   would stop the floating. Can't use relative positioning, since that
   would cause floating in the wrong (namely: original) place. Can't 
   change height of #dots, since it would have the full width, and
   thus cause early wrapping on all lines. */
.pre-dots {
    float: right;
    height: 36px;  /* 2x line height (one less than visible lines) */
}

.dots {
    float: right; /* to make the text wrap around the dots */
    clear: right; /* to push us below (not next to) .pre-dots */
}

/* hides the dots if the text has *exactly* 3 lines */
.hidedots1 {
    background: white;
    width: 150px;
    height: 18px;       /* line height */
    position: absolute; /* otherwise, because of the width, it'll be wrapped */
}

/* hides the dots if the text has *less than* 3 lines */
.hidedots2 {
    background: white; 
    width: 150px;
    height: 54px;       /* 3x line height, to ensure hiding even if empty */
    position: absolute; /* ensures we're above the dots */
}

Результат выглядит так:

изображение полученного результата с различной длиной текста

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

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

Протестировано в IE9, IE8 (эмулируется), Chrome, Firefox, Safari и Opera. Не работает в IE7.


9
Вы действительно не нужны 4 HTML элементов, при условии , your textоборачивают <p>тег (как они должны быть), то вы можете использовать .ellipsify p:beforeи .ellipsify p:afterтогда, конечно, нужны код для многоточия, а также, возможно , потребуется , поскольку они не могут работать для пустых элементов. .ellipsify p:before{content:"\2026";}\2026content:" ";
Val

2
Хотя я не думаю, что этот ответ подойдет для многих ситуаций, по крайней мере, предоставляется не плагин, не JavaScript-ответ. Это и изобретательность, которая вошла в конструкцию этого ответа, - то, почему я это делаю +1.
VoidKing

@MichalStefanow Только один - тот, для которого я его создал: описания на «карточках» приложений в Apptivate.MS, например, см. Apptivate.ms/users/1141291/blynn .
Балфа

@ Павло, мне очень нравится твое решение. Но похоже, что он работает только с заданным стандартным текстом, не если я загружаю текст из БД, потому что сценарий тогда не знает externalHeight загруженного текста?
JonSnow

2
@SchweizerSchoggi, псевдоэлементы или нет, это решение не зависит от JS. Не должно иметь значения, откуда вы получаете текст, если вы правильно его реализуете.
Павло

41

Вот недавняя статья css-tricks, в которой это обсуждается.

Некоторые из решений в вышеупомянутой статье (которые не упомянуты здесь)

1) -webkit-line-clampи 2) Поместите абсолютно позиционированный элемент внизу справа с затуханием

Оба метода предполагают следующую разметку:

<div class="module"> /* Add line-clamp/fade class here*/
  <p>Text here</p>
</div>

с CSS

.module {
  width: 250px;
  overflow: hidden;
}

1) -webkit-line-зажим

FIDDLE зажима линии (.. максимум для 3 линий)

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  max-height: 3.6em; /* I needed this to get it to work */
}

2) исчезают

Допустим, вы установили высоту строки в 1,2em. Если мы хотим выставить три строки текста, мы можем просто сделать высоту контейнера 3.6em (1.2em × 3). Скрытое переполнение скроет все остальное.

Исчезать FIDDLE

p
{
    margin:0;padding:0;
}
.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.fade {
  position: relative;
  height: 3.6em; /* exactly three lines */
}
.fade:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 1.2em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

Решение № 3 - комбинация с использованием @supports

Мы можем использовать @supports для применения линейного зажима webkit в браузерах webkit и применения затухания в других браузерах.

@supports line-зажим с затухающей резервной скрипкой

<div class="module line-clamp">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

CSS

.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.line-clamp {
      position: relative;
      height: 3.6em; /* exactly three lines */
    }
.line-clamp:after {
      content: "";
      text-align: right;
      position: absolute;
      bottom: 0;
      right: 0;
      width: 70%;
      height: 1.2em;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
 }

@supports (-webkit-line-clamp: 3) {
    .line-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;  
        max-height:3.6em; /* I needed this to get it to work */
        height: auto;
    }
    .line-clamp:after {
        display: none;
    }
}

@ HP's411 В Firefox вместо многоточия вы увидите эффект затухания
Данилд

34

Ссылка ниже предоставляет чистое HTML / CSS решение этой проблемы.

Поддержка браузера - как указано в статье:

До сих пор мы тестировали Safari 5.0, IE 9 (должен быть в стандартном режиме), Opera 12 и Firefox 15.

Старые браузеры по-прежнему будут работать достаточно хорошо, поскольку основная часть макета имеет обычные свойства позиционирования, полей и отступов. если ваша платформа старше (например, Firefox 3.6, IE 8), вы можете использовать этот метод, но переделать градиент как автономное изображение PNG или фильтр DirectX.

http://www.mobify.com/dev/multiline-ellipsis-in-pure-css

CSS:

p { margin: 0; padding: 0; font-family: sans-serif;}

.ellipsis {
    overflow: hidden;
    height: 200px;
    line-height: 25px;
    margin: 20px;
    border: 5px solid #AAA; }

.ellipsis:before {
    content:"";
    float: left;
    width: 5px; height: 200px; }

.ellipsis > *:first-child {
    float: right;
    width: 100%;
    margin-left: -5px; }        

.ellipsis:after {
    content: "\02026";  

    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;

    float: right; position: relative;
    top: -25px; left: 100%; 
    width: 3em; margin-left: -3em;
    padding-right: 5px;

    text-align: right;

    background: -webkit-gradient(linear, left top, right top,
        from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);           
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); }

HTML:

<div class="ellipsis">
    <div>
        <p>Call me Ishmael.  Some years ago &ndash; never mind how long precisely &ndash; having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.  It is a way I have of driving off the spleen, and regulating the circulation.  Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off &ndash; then, I account it high time to get to sea as soon as I can.</p>  
    </div>
</div>

скрипку

(изменить размер окна браузера для тестирования)


2
«Пока мы проверили ...» все, кроме Chrome?
Стивенспил

Испытание прошлоChrome for Mac Version 48.0.2564.116
Adrien Be

21

После просмотра спецификации W3 для переполнения текста , я не думаю, что это возможно, используя только CSS. Ellipsis - это новое свойство, поэтому оно, вероятно, пока не получило большого использования или обратной связи.

Однако этот парень, похоже, задал похожий (или идентичный) вопрос, и кто-то смог придумать хорошее решение jQuery. Вы можете продемонстрировать решение здесь: http://jsfiddle.net/MPkSF/

Если javascript не вариант, я думаю, вам не повезло ...


3
Довольно новый? MSIE поддерживал его начиная с IE6. Сегодня его поддерживают все браузеры, кроме Firefox .
Кристиан

Я бы назвал любое свойство CSS3, которое не реализовано глобально, «new-ish». Это просто вопрос семантики. Кроме того, вы понимаете, что комментируете сообщение, которому почти год?
Джефф

5
Это не CSS3, это было там целую вечность и широко распространено. Только спецификация может считаться новой. Кроме того, если SO не хочет комментировать старые темы, они могли бы отключить его.
Кристиан

10

Просто хочу добавить к этому вопросу ради полноты.

  • Опера имеет нестандартную поддержку для этого называется -o-ellipsis-lastline .
  • dotdotdot - отличный плагин jQuery, который я могу порекомендовать.

Похоже, -o-ellipsis-lastlineвозможно, были удалены, когда Opera переключилась на WebKit. Оставив пулю в исторических целях.
Мэтт

8

Отличный вопрос ... Хотелось бы, чтобы был ответ, но это самое близкое, что вы можете получить с помощью CSS в наши дни. Нет многоточия, но все еще довольно удобно.

overflow: hidden;
line-height: 1.2em;
height: 3.6em;      // 3 lines * line-height

на самом деле, ответ Кевина является самым близким, который вы можете получить с помощью CSS в эти дни stackoverflow.com/a/14248844/759452
Adrien Be

7

Я нашел это решение CSS (Scss), которое работает довольно хорошо. В браузерах webkit он показывает многоточие, а в других браузерах просто обрезает текст. Что хорошо для моего предполагаемого использования.

$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 3;

h2 {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Пример создателя: http://codepen.io/martinwolf/pen/qlFdp


-webkit-line-clampподдержка браузера caniuse.com/#search=-webkit-line-clamp
Adrien Be

6

Вот самое близкое решение, которое я мог получить, используя только CSS.

HTML

<div class="ellipsis"> <span>...</span>
Hello this is Mr_Green from Stackoverflow. I love CSS. I live in CSS and I will never leave working on CSS even my work is on other technologies.</div>

CSS

div {
    height: 3em;
    line-height: 1.5em;
    width: 80%;
    border: 1px solid green;
    overflow: hidden;
    position: relative;
}
div:after {
    content:". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
    background-color: white;
    color: white;
    display: inline;
    position: relative;
    box-shadow: 8px 1px 1px white;
    z-index: 1;
}
span {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: white;
}

Рабочая скрипка ( измените размер окна, чтобы проверить )

Ссылка на мой блог для объяснения

Обновленная скрипка

Я надеюсь, что теперь у какого-нибудь специалиста по CSS есть идея, как сделать его идеальным. :)


Этот ответ вызывает у меня боль в животе. Прежде всего, вы не используете типографски доступный многоточие… (это символ шрифта, занимающий один пробел). Сравните smashingmagazine.com/2008/08/11/top-ten-web-typography-sins. И с помощью вашего решения вы не можете реально контролировать, где находится многоточие, так что оно может прийти в нежелательные ситуации, например, для точек подряд. ,
Фолькер Э.

1
@VolkerE. Спасибо за информацию. Вот обновленная скрипка . пожалуйста, дайте мне знать, если я упускаю какой-либо пункт в вашем объяснении.
Mr_Green

Отличное решение (оригинальное), но почему бы не использовать div::beforeвместо этого span? :)
Адам

@ Adam был какой-то крайний случай, поэтому я не использовал псевдоэлемент. ( Я не помню сейчас )
Mr_Green

5

Здесь много ответов, но мне нужен был такой:

  • Только CSS
  • Перспективный (становится более совместимым со временем)
  • Не собираюсь разбивать слова на части (только на пробелы)

Предостережение заключается в том, что он не обеспечивает многоточие для браузеров, которые не поддерживают -webkit-line-clampправило (в настоящее время IE, Edge, Firefox), но он использует градиент для затухания текста.

.clampMe {
  position: relative;
  height: 2.4em; 
  overflow: hidden;
}

.clampMe:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 1.2em; /* Just use multiples of the line-height */
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%);
}

/* Now add in code for the browsers that support -webkit-line-clamp and overwrite the non-supportive stuff */
@supports (-webkit-line-clamp: 2) {
  .clampMe {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
  }
  
  .clampMe:after {
    display: none;
  }
}
<p class="clampMe">There's a lot more text in here than what you'll ever see. Pellentesque habitant testalotish morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

Вы можете увидеть его в действии в этом CodePen, а также увидеть версию Javascript здесь (без jQuery).


4

Немного опоздал на эту вечеринку, но я придумал, как мне кажется, уникальное решение. Вместо того, чтобы пытаться вставить свой собственный многоточие с помощью css-трюка или js, я подумал, что попробую перекатиться с ограничением на одну строку. Поэтому я дублирую текст для каждой «строки» и просто использую отрицательный текстовый отступ, чтобы убедиться, что одна строка начинается там, где заканчивается последняя. FIDDLE

CSS:

#wrapper{
    font-size: 20pt;
    line-height: 22pt;
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.text-block-line{
    height: 22pt;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    width: auto;
}
.text-block-line:last-child{
    text-overflow: ellipsis;
}

/*the follwing is suboptimal but neccesary I think. I'd probably just make a sass mixin that I can feed a max number of lines to and have them avialable. Number of lines will need to be controlled by server or client template which is no worse than doing a character count clip server side now. */
.line2{
    text-indent: -100%;
}
.line3{
    text-indent: -200%;
}
.line4{
    text-indent: -300%;
}

HTML:

<p id="wrapper" class="redraw">
    <span class="text-block-line line1">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line2">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line3">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line4">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
</p>

Больше подробностей в скрипке. Существует проблема с перекомпоновкой браузера, для которой я использую перерисовку JS, и поэтому проверяйте ее, но это основная концепция. Любые мысли / предложения очень ценятся.


1
Мне не нравится мысль о дублировании каждой строки текста. Более того - что если текст динамический - вы не будете знать, сколько строк добавить. При этом +1 за это уникальное решение!
Данилд

Спасибо за ввод :) Динамический текст не проблема. В основном, он определяет максимальную высоту контейнера в шаблоне. Если вы хотите ограничить его 3 строками, тогда наберите 3. Мой вариант использования имеет заголовок, который может быть 1-2 строками, и выдержку, которая может быть 1-3. Это известные ценности. Не имеет значения, какова длина строки. Также, если вы делаете это в шаблонной ситуации, а не в статическом html, вы можете использовать его для обработки отрицательного отступа текста с помощью встроенного стиля, так что вам не нужен этот большой блок line1, line2, line3 и т. Д. Я могу вспомнить скрипку, используя шаблон js в качестве примера.
lupos

Было бы полезно, если нарушение слов не является проблемой в проекте.
Mr_Green

3

спасибо @balpha и @Kevin, я объединяю два метода вместе.

в этом методе нет необходимости

Вы можете использовать background-imageбез градиента, чтобы скрыть точки.

innerHTMLиз .ellipsis-placeholderне является необходимым, я использую , .ellipsis-placeholderчтобы сохранить одинаковую ширину и высоту с .ellipsis-more. Вы могли бы использовать display: inline-blockвместо этого.

.ellipsis {
    overflow: hidden;
    position: relative;
}
.ellipsis-more-top {/*push down .ellipsis-more*/
    content: "";
    float: left;
    width: 5px;
}
.ellipsis-text-container {
    float: right;
    width: 100%;
    margin-left: -5px;
}
.ellipsis-more-container {
    float: right;
    position: relative;
    left: 100%;
    width: 5px;
    margin-left: -5px;
    border-right: solid 5px transparent;
    white-space: nowrap;
}
.ellipsis-placeholder {/*keep text around ,keep it transparent ,keep same width and height as .ellipsis-more*/
    float: right;
    clear: right;
    color: transparent;
}
.ellipsis-placeholder-top {/*push down .ellipsis-placeholder*/
    float: right;
    width: 0;
}
.ellipsis-more {/*ellipsis things here*/
    float: right;
}
.ellipsis-height {/*the total height*/
    height: 3.6em;
}
.ellipsis-line-height {/*the line-height*/
    line-height: 1.2;
}
.ellipsis-margin-top {/*one line height*/
    margin-top: -1.2em;
}
.ellipsis-text {
    word-break: break-all;
}
<div class="ellipsis ellipsis-height ellipsis-line-height">
    <div class="ellipsis-more-top ellipsis-height"></div>
    <div class="ellipsis-text-container">
        <div class="ellipsis-placeholder-top ellipsis-height ellipsis-margin-top"></div>
        <div class="ellipsis-placeholder">
           <span>...</span><span>more</span>
        </div>
        <span class="ellipsis-text">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </span>
    </div>
    <div class="ellipsis-more-container ellipsis-margin-top">
        <div class="ellipsis-more">
            <span>...</span><span>more</span>
        </div>
    </div>
</div>

jsfiddler


2

Решение Javascript будет лучше

  • получить номер строки текста
  • переключить is-ellipsisкласс, если размер окна или изменение элемента

getRowRects

Element.getClientRects()работает как это

введите описание изображения здесь

каждый ряд в одной и той же строке имеет одинаковое topзначение, поэтому найдите значения с различным topзначением, например так

введите описание изображения здесь

function getRowRects(element) {
    var rects = [],
        clientRects = element.getClientRects(),
        len = clientRects.length,
        clientRect, top, rectsLen, rect, i;

    for(i=0; i<len; i++) {
        has = false;
        rectsLen = rects.length;
        clientRect = clientRects[i];
        top = clientRect.top;
        while(rectsLen--) {
            rect = rects[rectsLen];
            if (rect.top == top) {
                has = true;
                break;
            }
        }
        if(has) {
            rect.right = rect.right > clientRect.right ? rect.right : clientRect.right;
            rect.width = rect.right - rect.left;
        }
        else {
            rects.push({
                top: clientRect.top,
                right: clientRect.right,
                bottom: clientRect.bottom,
                left: clientRect.left,
                width: clientRect.width,
                height: clientRect.height
            });
        }
    }
    return rects;
}

поплавок ...more

как это

введите описание изображения здесь

определить изменение размера окна или элемента

как это

введите описание изображения здесь

введите описание изображения здесь

введите описание изображения здесь



0

основанный на чистом методе css -webkit-line-зажим:

@-webkit-keyframes ellipsis {/*for test*/
    0% { width: 622px }
    50% { width: 311px }
    100% { width: 622px }
}
.ellipsis {
    max-height: 40px;/* h*n */
    overflow: hidden;
    background: #eee;

    -webkit-animation: ellipsis ease 5s infinite;/*for test*/
    /**
    overflow: visible;
    /**/
}
.ellipsis .content {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    font-size: 50px;/* w */
    line-height: 20px;/* line-height h */
    color: transparent;
    -webkit-line-clamp: 2;/* max row number n */
    vertical-align: top;
}
.ellipsis .text {
    display: inline;
    vertical-align: top;
    font-size: 14px;
    color: #000;
}
.ellipsis .overlay {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /**
    overflow: visible;
    left: 0;
    background: rgba(0,0,0,.5);
    /**/
}
.ellipsis .overlay:before {
    content: "";
    display: block;
    float: left;
    width: 50%;
    height: 100%;

    /**
    background: lightgreen;
    /**/
}
.ellipsis .placeholder {
    float: left;
    width: 50%;
    height: 40px;/* h*n */

    /**
    background: lightblue;
    /**/
}
.ellipsis .more {
    position: relative;
    top: -20px;/* -h */
    left: -50px;/* -w */
    float: left;
    color: #000;
    width: 50px;/* width of the .more w */
    height: 20px;/* h */
    font-size: 14px;

    /**
    top: 0;
    left: 0;
    background: orange;
    /**/
}
<div class='ellipsis'>
    <div class='content'>
        <div class='text'>text text text text text text text text text text text text text text text text text text text text text </div>
        <div class='overlay'>
            <div class='placeholder'></div>
            <div class='more'>...more</div>
        </div>
    </div>
</div>


-1

Я нашел трюк с JavaScript, но вы должны использовать длину строки. Допустим, вы хотите 3 строки шириной 250 пикселей, вы можете рассчитать длину на строку, т.е.

//get the total character length.
//Haha this might vary if you have a text with lots of "i" vs "w"
var totalLength = (width / yourFontSize) * yourNumberOfLines

//then ellipsify
function shorten(text, totalLength) {
    var ret = text;
    if (ret.length > totalLength) {
        ret = ret.substr(0, totalLength-3) + "...";
    }
    return ret;
}

Скорее всего, мы не везде используем шрифты фиксированной ширины. Так что этот трюк может потерпеть неудачу в этих ситуациях.
Овилия
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.