Как скрыть лишний текст?

Question

[fruneen]

Здравствуйте коллеги, нужна ваша помощь, есть блок фиксированной высоты, как убрать лишний текст, выходящий за пределы блока, и добавить гиперссылку в конце, по типу "подробнее", "далее" и т.д.. Прошу учесть то, что блоков с текстом произвольное количество и у них всех одинаковый класс.
Также даю ссылку на JsFiddle https://jsfiddle.net/t8xcLf2k/1/

Дополнение:
- Желательно без сторонних плагинов
- Что-то по типу этого

Answer 1

[Максим]

js_: https://codepen.io/topicstarter/pen/jONqdrw
js_multi level drop: https://codepen.io/topicstarter/pen/gOYrqRr
css_: https://codepen.io/topicstarter/pen/oNvYwQj

Comments

[fruneen]

Не работает с несколькими блоками, если у них одинаковый класс

[Максим]

fruneen, добавил и такой пример

[Максим]

fruneen, на css вообще блоки с одинаковым class - поясните что не так

[fruneen]

Максим Ленский, просто на первом примере добавил еще один блок, изменил текст, изменил id на class но текст почему-то одинаковый оставался. Во втором примере вроде бы все так, спасибо за помощь! Не подскажите, как добавить гиперссылку вместо "..."?

[Максим]

fruneen, вторую ссылку посмотри ..."js_multi level drop"

[fruneen]

Максим Ленский, увидел, спасибо!

[Максим]

fruneen, галочку и палец вверх нажми

Answer 2

[Даниил Братухин]

У line-clamp хорошая поддержка (кроме IE, конечно))

Comments

[fruneen]

А как тогда гиперссылку добавить в конце?

[Brad9aga]

Даниил Братухин, fruneen

[Даниил Братухин]

Brad9aga, fruneen хочет ссылку на последней строке описания, так что наши варианты в топку. На одном CSS красиво уже не выйдет.

[Brad9aga]

Даниил Братухин,
а если че нить в таком стиле

[Даниил Братухин]

Brad9aga, вот так будет больше похоже (да, это css-only монстр, о котором я предупреждал - fruneen, держите для ознакомления :)

[fruneen]

Даниил Братухин, да, но тут если мало текста, то гиперссылка все равно остаётся

[Brad9aga]

fruneen, ну да этот момент не учел

[Даниил Братухин]

fruneen Brad9aga обновил jsfiddle, работает кроме одного случая (в центре красным). Пользуйтесь js/php/чем угодно, короче, не надо всякой ерундой страдать))

[Brad9aga]

Даниил Братухин, я чисто по приколу

Answer 3

[Vadim Bogomazov]

Если нужно сделать на стороне фронта, то можно посмотреть в сторону dotdotdot-js

Answer 4

[Антон Р.]

Лучше это делать на серверной стороне на стадии вывода текста. CSS и прочие overflow: hidden это костыли.

Comments

[fruneen]

На js нельзя реализовать?

[Антон Р.]

fruneen, знаю как на php, js нет.

Answer 5

[Ваге]

вот css вариант

jsfiddle

.text {
  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;
}

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

Comments

[fruneen]

Как добавить тогда в конце гиперссылку?

Answer 6

[SeltonSoer]

Вообще это очень нетривиальная фигня) Если есть возможность, то пускай бэк это реализует) На стороне фронта это достаточно тяжело сделать адекватно