Как обрезать многострочный текст что бы в конце стояли

211

09 марта 2019, 13:40

.description { 
	border-top: 1px solid #fff; 
	padding: 25px 10px; 
	margin-top: 5px; 
	height: 135px; 
  width: 100px; 
	position: relative; 
	display: -webkit-box; 
	-webkit-line-clamp: 5; 
	-webkit-box-orient: vertical; 
	overflow: hidden; 
	text-overflow: ellipsis; 
}

<div class="description"><a href="https://allescortsankara.com/girl/vera/" title="Vera" data-wpel-link="internal"></a><a href="/">test test testes tsets test test testes tsets test test testes tsets test test testes tsetstest test testes tsets test test testes tsets  test test testes tsetstest test testes tsets .</div>

Работать должно в браузерах хром, опера, гугл.

text-overflow: ellipsis;

Работает только в хроме. В остальных браузерах нет не работает. После обрезки этот текст должен оставаться в коде

Answer 1

Может быть так ? источник

var size = 120, 
    newsContent= $('.news-content'), 
    newsText = newsContent.text(); 
     
if(newsText.length > size){ 
	newsContent.text(newsText.slice(0, size) + ' ...'); 
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic-ext); 
 
body{ 
	font-family: 'Open Sans', sans-serif; 
	font-size: 14px; 
	color: #99aaad; 
} 
.bx-content{ 
	width: 600px; 
	padding: 30px; 
	border: 1px solid #a8b3b5; 
	border-radius: 3px; 
	margin: 100px auto; 
} 
.news-content{ line-height: 20px; margin-bottom: 10px;} 
h1{ margin-top: 0; color: #52686c; }

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<div class="bx-content"> 
	<h1>Каким способом можно обрезать текст с троеточием в конце?</h1> 
	<div class="news-content">Добрый день! Интересует вопрос как можно обрезать текст, чтобы в конце всегда было троеточие. Вариант с подставлением туда рисунка с градиентным фоном не выход. CSS свойство {text-overflow: ellipsis} тоже не помогает, так как оно работает с одной строчкой, у меня же блок с текстом на 5-6 строк. Посоветуйте по возможности более-менее детальную инфу как это сделать. Спасибо за ответ.</div> 
</div>

Answer 2

Вот такой, костыльный, вариант.

var lineClamp = (5*18); // 5 строчек, одна строчка ~18px 
 
$('.description a').each(function(){ 
  var thisHeight = $(this).height(); 
  if(thisHeight>lineClamp){ 
    $(this).addClass('description-big-size').height(lineClamp); 
  } 
});

.description { 
  border-top: 1px solid #fff; 
  padding: 25px 10px; 
  margin-top: 5px; 
  height: 135px; 
  width: 100px; 
  position: relative; 
  overflow: hidden; 
} 
 
.description a { 
  display: block; 
  width: 100%; 
  overflow: hidden; 
} 
.description-big-size {position: relative;} 
.description-big-size::after { 
  content: '...'; 
  position: absolute; 
  background: #fff; 
  right: 0; 
  bottom: 0; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<!-----------------------------------> 
<div class="description"> 
  <a href="https://allescortsankara.com/girl/vera/" title="Vera" data-wpel-link="internal"></a> 
  <a href="/">test test testes tsets test test testes tsets test test testes tsets test test testes tsetstest test testes tsets test test testes tsets  test test testes tsetstest test testes tsets .</a> 
</div> 
 
<div class="description"> 
  <a href="https://allescortsankara.com/girl/vera/" title="Vera" data-wpel-link="internal"></a> 
  <a href="/">test test testes tsets testtest test testes tsets test</a> 
</div>