За допомогою 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 / ...
Шишир Arora

Я відповів на це дуже докладно, чистим рішенням CSS тут . Це надійно працює. Як було сказано у цій відповіді, цього набагато простіше досягти за допомогою Javascript, але якщо це не вдається, це працює .
dashard

Відповіді:


84

Існує також кілька плагінів jquery, які займаються цією проблемою, але багато хто не обробляє кілька рядків тексту. Наступні роботи:

Також є кілька випробувань на відповідність .


57
Я не бачив жодного чистого рішення CSS щодо цієї вимоги
Джим Томас

@Ovilia зауважте, що рішення Джима також включає плагін jQuery під назвою jquery.autoellipsis.js, вам потрібно завантажити окремо включити це
Jeff

7
CSS багатостроковий elipsis підручник: 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:" ";
Валь

2
Хоча я не думаю, що ця відповідь підходить для багатьох ситуацій, хоча б відповідь, що не стосується модуля, надається на JavaScript. Це та винахідливість, яка вклалася в побудову цієї відповіді, саме тому я +1її інформую.
VoidKing

@MichalStefanow Тільки одне - те, для чого я створив його: Описи програми "Картки" на Apptivate.MS, наприклад, див. Apptivate.ms/users/1141291/blynn .
бальфа

@Pavlo, мені дуже подобається ваше рішення. Але, здається, працює лише з заданим стандартним текстом, а не якщо я завантажую текст з db, тому що скрипт не знає зовнішньої висоти завантаженого тексту?
JonSnow

2
@SchweizerSchoggi, псевдоелементи чи ні, це рішення не покладається на JS. Не має значення, звідки ви берете текст, якщо правильно його реалізуєте.
Павло

41

Ось нещодавня стаття css-трюків, яка обговорює це.

Деякі рішення у наведеній статті (які тут не згадуються) є

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,2ем. Якщо ми хочемо розкрити три рядки тексту, ми можемо просто зробити висоту контейнера 3,6ем (1,2ем × 3). Прихований перелив приховає решту.

Зникає ФІДЛЯ

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 до веб-браузерів і застосувати зникнення в інших браузерах.

@supports лінія-затискач із згасанням западної скрипки

<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 ви побачите ефект згасання замість еліпсису
Danield

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?
stevenspiel

Тест зданоChrome for Mac Version 48.0.2564.116
Адріан Бе

21

Після перегляду специфікації W3 для переповнення тексту , я не думаю, що це можливо, використовуючи лише CSS. Елліпсіс є новим властивістю, тому, мабуть, поки не отримав великого використання та відгуків.

Однак, схоже , цей хлопець задав подібне (або ідентичне) питання, і хтось зміг придумати приємне рішення jQuery. Демонструвати рішення можна тут: http://jsfiddle.net/MPkSF/

Якщо javascript не є варіантом, я думаю, вам може не пощастити ...


3
Нова-іш? MSIE підтримував його з IE6. Сьогодні його підтримують усі браузери, крім Firefox .
Крістіан

Я б назвав будь-яке властивість CSS3, яке глобально не реалізовано, "new-ish". Це просто питання семантики. Крім того, чи ти розумієш, що коментуєш повідомлення, якому майже рік?
Джефф

5
Це не CSS3, він існує віками і широко застосовується. Тільки специфікація може вважатися новою. Крім того, якщо ТАК не хотів коментарів до старих потоків, вони могли б його відключити.
Крістіан

10

Просто хочу додати до цього питання заради повноти.

  • Opera має нестандартну підтримку цього називається -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
Адріан.

7

Я знайшов це рішення css (scss), яке працює досить добре. У веб-браузерах він відображає еліпсис, а в інших браузерах він просто врізає текст. Що добре для мого призначення.

$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

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? :)
Адам

@Адам був крайній випадок, тому я не використовував псевдоелемент. ( Я цього не пам’ятаю зараз )
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, я подумав, що я спробую прокрутити лише одне обмеження. Тому я дублюю текст для кожного "рядка" і просто використовую від'ємний текст-відступ, щоб переконатися, що один рядок починається там, де зупиняється останній. ПІДТВОРЕННЯ

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, я поєдную два методи разом.

у цьому методі немає необхідних js.

ви можете використовувати 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-clamp:

@-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.