Обмежте довжину тексту до n рядків за допомогою CSS


515

Чи можна обмежити довжину тексту "n" рядками за допомогою CSS (або вирізати його, коли переповнюється вертикально).

text-overflow: ellipsis; працює лише для 1 рядкового тексту.

оригінальний текст:

Ultrices natoque mus mattis, aliquam, крах в pellentesque
tincidunt elit purus lectus, vel ut aliquet, elementum nunc
nunc runcus placerat urna! Сидіти ест сед! Ut penatibus turpis
mus tincidunt! Dapibus sed aenean, magna sagittis, lorem velit

потрібний вихід (2 рядки):

Ultrices natoque mus mattis, aliquam, крах у pellentesque
tincidunt elit purus lectus, vel ut aliquet, elementum ...


1
Просто до відома: текст переповнення крапки не підтримуються в Firefox, см bugzilla.mozilla.org/show_bug.cgi?id=312156
Joril

8
здається, хтось утік, зробивши це просто css mobify.com/dev/multiline-ellipsis-in-pure-css
Gaurav Shah

не працює на IE10. Працює 11.
користувач2060451

@GauravShah Дякую Він працює і на IE10. Більшість рішень тут не є крос-браузером.
користувач2060451

Відповіді:


655

Існує спосіб зробити це за допомогою неофіційного синтаксису ліній-затискачів , а починаючи з Firefox 68, він працює у всіх основних браузерах.

body {
   margin: 20px;
}

.text {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}
<div class="text">
Lorem ipsum dolor sit amet, consectetur 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.
</div>

Якщо ви не піклуєтесь про користувачів IE, немає необхідності робити line-heightі max-heightрезервні копії.


3
наприклад, з певним розміром шрифту до висоти рядка ви можете бачити частину наступного рядка також із вирівнюванням тексту: виправдайте, еліпсис знаходиться не в кінці останнього рядка, але перекриває текст у позиції, він було б, якби текст був вирівняний ліворуч
Матус

3
ось ця скрипка: jsfiddle.net/csYjC/1122, поки я її готував, я з’ясував, що частина останнього рядка видно лише тоді, коли є прокладка
Matus

Ну, ніхто не казав, що ця нестандартна чорна магія, яка працює лише у веб-каті, буде працювати ідеально весь час. Ви можете використовувати набивки для іншого контейнера, можливо, батьківського. Введення тексту в тег <p> має ідеальний сенс: jsfiddle.net/csYjC/1129
Євген

2
Зауважте, що за цим коментарем, -webkit-line-clamp не поважає видимість: приховано. Це коштувало мені декількох годин налагодження. Ось підтримуючий звіт про помилку: bugs.webkit.org/show_bug.cgi?id=45399 .
Кевін

3
Якщо у вас виникли проблеми з -webkit-box-orient: vertical;прихованим під час збирання scss, спробуйте це /* autoprefixer: ignore next */ -webkit-box-orient: vertical;
Салам

109

Що ви можете зробити, це:

.max-lines {
  display: block;/* or inline-block */
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em;
  line-height: 1.8em;
}
<p class="max-lines">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae leo dapibus, accumsan lorem eleifend, pharetra quam. Quisque vestibulum commodo justo, eleifend mollis enim blandit eu. Aenean hendrerit nisl et elit maximus finibus. Suspendisse scelerisque consectetur nisl mollis scelerisque.</p>

де max-height:= line-height:× <number-of-lines>в em.


13
Працює як переповнення тексту: кліп, як його не відображається (...)
rishiAgar

Здається, і для мене найкращим рішенням, але, як зазначив @rishiAgar, не закінчується еліпсісом. Продовжує функціонувати як кліп.
Девід Керіган

Я вважаю, що вам доведеться додати атрибути, display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;щоб відобразити еліпсис. Але це буде працювати лише в Chrome. Для рішення, яке працює і на Firefox, дивіться тут: stackoverflow.com/a/20595073/1884158 А ось корисний підручник з цього питання: css-tricks.com/line-clampin
modulitos

34

Робота з крос-браузерним рішенням

Ця проблема мучила нас усіх роками.

Щоб допомогти у всіх випадках, я виклав підхід лише CSS та підхід jQuery у випадку, якщо застереження css є проблемою.

Ось єдине рішення CSS, яке я придумав, який працює за будь-яких обставин, з кількома незначними застереженнями.

Основи прості, він приховує переповнення прольоту і встановлює максимальну висоту на основі висоти лінії, як запропонував Євген Xa.

Потім є псевдоклас після вмістуючого діва, який добре розміщує еліпсис.

Коваджі

Це рішення завжди буде розміщувати еліпсис, незалежно від того, чи є в ньому потреба.

Якщо останній рядок закінчується закінченням речення, ви закінчите чотирма крапками….

Вам потрібно буде задовольнити виправдане вирівнювання тексту.

Еліпсис буде праворуч від тексту, який може виглядати неохайно.

Код + фрагмент

jsfiddle

.text {
  position: relative;
  font-size: 14px;
  color: black;
  width: 250px; /* Could be anything you like. */
}

.text-concat {
  position: relative;
  display: inline-block;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em; /* (Number of lines you want visible) * (line-height) */
  line-height: 1.2em;
  text-align:justify;
}

.text.ellipsis::after {
  content: "...";
  position: absolute;
  right: -12px; 
  bottom: 4px;
}

/* Right and bottom for the psudo class are px based on various factors, font-size etc... Tweak for your own needs. */
<div class="text ellipsis">
  <span class="text-concat">
Lorem ipsum dolor sit amet, nibh eleifend cu his, porro fugit mandamus no mea. Sit tale facete voluptatum ea, ad sumo altera scripta per, eius ullum feugait id duo. At nominavi pericula persecuti ius, sea at sonet tincidunt, cu posse facilisis eos. Aliquid philosophia contentiones id eos, per cu atqui option disputationi, no vis nobis vidisse. Eu has mentitum conclusionemque, primis deterruisset est in.

Virtute feugait ei vim. Commune honestatis accommodare pri ex. Ut est civibus accusam, pro principes conceptam ei, et duo case veniam. Partiendo concludaturque at duo. Ei eirmod verear consequuntur pri. Esse malis facilisis ex vix, cu hinc suavitate scriptorem pri.
  </span>
</div>

jQuery Підхід

На мою думку, це найкраще рішення, але не всі можуть використовувати JS. В основному, jQuery перевірить будь-який.

Немає застережень щодо цього підходу, однак цей приклад коду призначений лише для демонстрації основної ідеї - я б не використовував це у виробництві, не вдосконалюючи його з двох причин:

1) Він перепише внутрішній html .text elems. потрібен чи ні. 2) Це не тест, щоб перевірити, що внутрішній html не має вкладених елем, тому ви багато покладаєтесь на автора, щоб правильно використовувати .text.

Відредаговано

Дякуємо за улов @markzzz

Код та фрагмент

jsfiddle

setTimeout(function()
{
	var max = 200;
  var tot, str;
  $('.text').each(function() {
  	str = String($(this).html());
  	tot = str.length;
    str = (tot <= max)
    	? str
      : str.substring(0,(max + 1))+"...";
    $(this).html(str);
  });
},500); // Delayed for example only.
.text {
  position: relative;
  font-size: 14px;
  color: black;
  font-family: sans-serif;
  width: 250px; /* Could be anything you like. */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="text">
Old men tend to forget what thought was like in their youth; they forget the quickness of the mental jump, the daring of the youthful intuition, the agility of the fresh insight. They become accustomed to the more plodding varieties of reason, and because this is more than made up by the accumulation of experience, old men think themselves wiser than the young.
</p>

<p class="text">
Old men tend to forget what thought was like in their youth;
</p>
 <!-- Working Cross-browser Solution

This is a jQuery approach to limiting a body of text to n words, and end with an ellipsis -->


3
Ваше рішення css не настільки добре, адже що з того випадку, якщо текст не переповнюється? це також шоу "..." ...
user5260143

Але також версія jQuery додає крапки, якщо текст коротший: jsfiddle.net/o82opadm/35
markzzz

@markzzz - дякую за це, не маю уявлення, як я це пропустив :-) Я переглянув це зараз, але це не те, що я використовував би у виробництві без трохи більше роботи. Але принаймні викладена основна ідея.
asimovasright

1
Я виявив, що рішення, що стосується лише CSS, здається, працює добре, але лише якщо ви використовуєте лише вимірювання пікселів. ЕМ і відсотки ввели мене в неприємності. І я додав еліпсис як <a> стиль для положення: абсолютний в нижньому правому куті для тих, хто хоче натиснути посилання та прочитати більше. У моєму випадку я знав, що текст завжди буде переповнений, тому jQuery не був необхідним. Дякуємо за корисне рішення CSS!
менталіст

30

Наскільки я бачу, це було б можливо лише за допомогою, height: (some em value); overflow: hiddenі навіть тоді воно не було б фантазії ...в кінці.

Якщо це не варіант, я думаю, що це неможливо без якоїсь попередньої обробки сервера (складно, оскільки потік тексту неможливо надійно передбачити) або jQuery (можливо, але, ймовірно, складно).


16
Здається, це працює для будь-якого розміру шрифту .mytext {overflow: hidden; лінія-висота: 1,2ем; максимальна висота: 2,4ем; }
Пітер

1
@ Педро так. Можливо, вам вдасться .mytextпропустити кожен за допомогою jQuery, з’ясувати, чи містить він більше вмісту, ніж видно, і додати ...вручну. Таким чином, ви сумісні з клієнтами, які не мають JS, і клієнти з JS можуть бути прикрасою. Можливо, варто окремо поставити запитання, щоб відповісти Гуру jQuery; це можливо зробити порівняно легко
Pekka


10

наступний клас CSS допоміг мені отримати дворядковий еліпсис.

  .two-line-ellipsis {
        padding-left:2vw;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 325px;
        line-height: 25px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        padding-top: 15px;
    }

5

Наразі ви не можете, але в майбутньому ви зможете користуватися text-overflow:ellipis-lastline. На даний момент він доступний з префіксом постачальника в Opera 10.60+: приклад


5
Це не працює для багаторядкових рядків, оскільки вимагає також встановити white-scace: nowrap. Дивіться тут .
Себастьян Ноак

4

У мене є рішення, яке працює добре, але замість еліпсису він використовує градієнт. Він працює, коли у вас є динамічний текст, тож ви не знаєте, чи буде достатньо довгим потрібен еліпс. Переваги полягають у тому, що вам не потрібно робити жодних обчислень JavaScript, і він працює для контейнерів змінної ширини, включаючи комірки таблиці, і є крос-браузером. Він використовує пару зайвих дівок, але це дуже просто здійснити.

Розмітка:

<td>
    <div class="fade-container" title="content goes here">
         content goes here
         <div class="fade">
    </div>
</td>

CSS:

.fade-container { /*two lines*/
    overflow: hidden;
    position: relative;
    line-height: 18px; 
    /* height must be a multiple of line-height for how many rows you want to show (height = line-height x rows) */
    height: 36px;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word;
}

.fade {
        position: absolute;
        top: 50%;/* only cover the last line. If this wrapped to 3 lines it would be 33% or the height of one line */
        right: 0;
        bottom: 0;
        width: 26px;
        background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}

допис у блозі: http://salzerdesign.com/blog/?p=453

приклад сторінки: http://salzerdesign.com/test/fade.html


3
.class{
   word-break: break-word;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   line-height: 16px; /* fallback */
   max-height: 32px; /* fallback */
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}

0

Мені дуже подобається затискання ліній, але поки немає підтримки для firefox .. тому я переходжу з математичним кальку і просто приховую переповнення

.body-content.body-overflow-hidden h5 {
    max-height: 62px;/* font-size * line-height * lines-to-show(4 in this case) 63px if you go with jquery */
    overflow: hidden;
}
.body-content h5 {
    font-size: 14px; /* need to know this*/
    line-height:1,1; /*and this*/
}

тепер давайте скажемо, що ви хочете видалити та додати цей клас через jQuery за посиланням, вам потрібно мати додатковий піксель, щоб максимальна висота становила 63 пікселя, це тому, що вам потрібно щоразу перевіряти, чи висота більша, ніж 62 пікселів, але у випадку 4 рядків ви отримаєте помилкову істину, тому додатковий піксель це виправить, і це не створить зайвих проблем

я вставлю кофескрипт для цього просто для прикладу, використовує пару посилань, які приховано за замовчуванням, з класами read-more та read-less, він видалить ті, яким переповнення не потрібне, і видалю тіло -заповнення класів

jQuery ->

    $('.read-more').each ->
        if $(this).parent().find("h5").height() < 63
             $(this).parent().removeClass("body-overflow-hidden").find(".read-less").remove()
             $(this).remove()
        else
            $(this).show()

    $('.read-more').click (event) ->
        event.preventDefault()
        $(this).parent().removeClass("body-overflow-hidden")
        $(this).hide()
        $(this).parent().find('.read-less').show()

    $('.read-less').click (event) ->
        event.preventDefault()
        $(this).parent().addClass("body-overflow-hidden")
        $(this).hide()
        $(this).parent().find('.read-more').show()

до речі, не додайте до цього рядка-затискача, він встановить висоту до 62 пікселів (для цього випадку), і у вас не буде сукупності jquery
Алексіс,

0

Якщо ви хочете зосередитись на кожному, що letterви можете зробити так, я посилаюся на це питання

Якщо ви хочете зосередитись на кожному, wordви можете зробити так + пробіл

Якщо ви хочете зосередитись на кожному, wordви можете зробити так + без місця


-1

Основний приклад коду, навчитися кодувати легко. Перевірте коментарі стилю CSS.

table tr {
  display: flex;
}
table tr td {
  /* start */
  display: inline-block; /* <- Prevent <tr> in a display css */
  text-overflow: ellipsis;
  white-space: nowrap;
  /* end */
  padding: 10px;
  width: 150px; /* Space size limit */
  border: 1px solid black;
  overflow: hidden;
}
<table>
  <tbody>
    <tr>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla egestas erat ut luctus posuere. Praesent et commodo eros. Vestibulum eu nisl vel dui ultrices ultricies vel in tellus.
      </td>
      <td>
        Praesent vitae tempus nulla. Donec vel porta velit. Fusce mattis enim ex. Mauris eu malesuada ante. Aenean id aliquet leo, nec ultricies tortor. Curabitur non mollis elit. Morbi euismod ante sit amet iaculis pharetra. Mauris id ultricies urna. Cras ut
        nisi dolor. Curabitur tellus erat, condimentum ac enim non, varius tempor nisi. Donec dapibus justo odio, sed consequat eros feugiat feugiat.
      </td>
      <td>
        Pellentesque mattis consequat ipsum sed sagittis. Pellentesque consectetur vestibulum odio, aliquet auctor ex elementum sed. Suspendisse porta massa nisl, quis molestie libero auctor varius. Ut erat nibh, fringilla sed ligula ut, iaculis interdum sapien.
        Ut dictum massa mi, sit amet interdum mi bibendum nec.
      </td>
    </tr>
    <tr>
      <td>
        Sed viverra massa laoreet urna dictum, et fringilla dui molestie. Duis porta, ligula ut venenatis pretium, sapien tellus blandit felis, non lobortis orci erat sed justo. Vivamus hendrerit, quam at iaculis vehicula, nibh nisi fermentum augue, at sagittis
        nibh dui et erat.
      </td>
      <td>
        Nullam mollis nulla justo, nec tincidunt urna suscipit non. Donec malesuada dolor non dolor interdum, id ultrices neque egestas. Integer ac ante sed magna gravida dapibus sit amet eu diam. Etiam dignissim est sit amet libero dapibus, in consequat est
        aliquet.
      </td>
      <td>
        Vestibulum mollis, dui eu eleifend tincidunt, erat eros tempor nibh, non finibus quam ante nec felis. Fusce egestas, orci in volutpat imperdiet, risus velit convallis sapien, sodales lobortis risus lectus id leo. Nunc vel diam vel nunc congue finibus.
        Vestibulum turpis tortor, pharetra sed ipsum eu, tincidunt imperdiet lorem. Donec rutrum purus at tincidunt sagittis. Quisque nec hendrerit justo.
      </td>
    </tr>
  </tbody>
</table>


4
ОП шукає багатолінійне рішення. Це працює лише в одиночних рядках тексту.
asimovasright

-11

Я роздивлявся це, але потім розумію, чорт мого веб-сайту використовується php !!! Чому б не використовувати функцію обрізки на введенні тексту та грати з максимальною довжиною ....

Ось можливе рішення і для тих, хто використовує php: http://ideone.com/PsTaI

<?php
$s = "In the beginning there was a tree.";
$max_length = 10;

if (strlen($s) > $max_length)
{
   $offset = ($max_length - 3) - strlen($s);
   $s = substr($s, 0, strrpos($s, ' ', $offset)) . '...';
}

echo $s;
?>

18
Ви не можете безпечно використовувати обробку на стороні сервера, оскільки ви не можете заздалегідь знати, скільки місця займе текст на сторінці. Це залежить від розміру шрифту, налаштувань розміру тексту браузера, рівня масштабування браузера тощо
ermannob
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.