主页 / 问题 / 897496
Accepted
bad code
Asked:2020-10-25 02:03:55 +0000 UTC2020-10-25 02:03:55 +0000 UTC

如何剪切多行文本以结束

  • 772

在此处输入图像描述

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

它应该可以在 Chrome、Opera、Google 浏览器中运行。

text-overflow: ellipsis;

仅适用于铬。在其他浏览器中不起作用。修剪后，此文本应保留在代码中。

jquery

2 个回答

  1. Best Answer

    可能是这样 ？资源

    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>

    • 1

  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>

    • 0

相关问题