Как сделать многоточие, если текст не помещается в блок

@skapunker · Регистрация: 13.12.2013

Author24 — интернет-сервис помощи студентам

Как сделать многоточие, если текст не помещается в блок? Предполагается, что текст будет не однострочный, поэтому свойство text-overflow:ellipsis не рассматривается.

Можно ли как нибудь это сделать с помощью css, не прибегая к js?
Если нельзя, то подскажите какой нибудь скрипт, который сможет это сделать.

Надо сделать как на картинке

@Qwerty_Wasd · 28.07.2017, 02:35

skapunker, без JS не получится пока, увы. А скрипт.... К примеру на JQuery(подключить не забудьте)

HTML5

1
2

<div>bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla
bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla</div>

CSS

div{
  height:50px;
  width:200px;
  word-wrap:break-word;
  border:1px solid red;
  overflow: hidden;  
}

Javascript

1 2	var size = 40,newsContent= $('div'), newsText=newsContent.text(); if(newsText.length > size){newsContent.text(newsText.slice(0, size) + ' ...');}

@skapunker · 28.07.2017, 02:45 **[ТС]**

а если у div'a есть класс, например <div class="left-block">
Как его по классу идентифицировать?

@Ares111 · 28.07.2017, 07:54

вместо 'div' пишем '.left-block'

@skapunker · 28.07.2017, 10:56 **[ТС]**

Сообщение от Ares111

вместо 'div' пишем '.left-block'

функция работает не совсем так, как нужно. Я так понял, что "var size = 40" это ограничение на количество символов. А мне нужно чтобы скрипт многоточие ставил именно там, где заканчивается блок.

@aj17 · 28.07.2017, 17:57

Воспользуйтесь плагином коль очень нужно

@skapunker 29 / 25 / 12 Регистрация: 13.12.2013 Сообщений: 1,377
		1
	Как сделать многоточие, если текст не помещается в блок 28.07.2017, 00:28. Показов 6265. Ответов 5 Метки нет (Все метки) Как сделать многоточие, если текст не помещается в блок? Предполагается, что текст будет не однострочный, поэтому свойство text-overflow:ellipsis не рассматривается. Можно ли как нибудь это сделать с помощью css, не прибегая к js? Если нельзя, то подскажите какой нибудь скрипт, который сможет это сделать. Надо сделать как на картинке 0

@skapunker 29 / 25 / 12 Регистрация: 13.12.2013 Сообщений: 1,377
	28.07.2017, 02:45 [ТС]	3
	а если у div'a есть класс, например <div class="left-block"> Как его по классу идентифицировать? 0

@Ares111 59 / 22 / 12 Регистрация: 30.05.2017 Сообщений: 73
	28.07.2017, 07:54	4
	вместо 'div' пишем '.left-block' 0

@skapunker 29 / 25 / 12 Регистрация: 13.12.2013 Сообщений: 1,377
	28.07.2017, 10:56 [ТС]	5
	Сообщение от Ares111 вместо 'div' пишем '.left-block' функция работает не совсем так, как нужно. Я так понял, что "var size = 40" это ограничение на количество символов. А мне нужно чтобы скрипт многоточие ставил именно там, где заканчивается блок. 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	28.07.2017, 17:57	6
	Воспользуйтесь плагином коль очень нужно 0