Question

我有一段长度有限的段落。达到限制后，会在缩短的文字末尾添加“ + ”符号。

我想将此作为“ + ”可点击，以便显示段落的其余部分。然后通过单击该段落，文本应该再次缩短。

示例：

到现在为止，我可以设法限制文字大小并在最后添加“+”。

代码：

var myDiv = $('#trim');
var myDivlength = myDiv.text().length;

if(myDivlength>10){
    myDiv.text(myDiv.text().substring(0,10));
    myDiv.append(" ..." + '+');
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://bootswatch.com/cosmo/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </head>

  <body>


  <p id="trim">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>




</body>

Answer 1

使用no-wrap，text-overflow和:after字符+字符，您可以使用CSS实现所有必需的行为。然后，您只需要在JS click处理程序中切换类。试试这个：

$('#trim').click(function() {
  $(this).toggleClass('full');
});

#trim {
  text-overflow: ellipsis;
  width: 400px;
  height: 30px;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  display: inline-block;
  padding-right: 20px;
}
#trim:after {
  content: '+';
  right: 0;
  position: absolute;
}
#trim.full {
  width: auto;
  height: auto;
  white-space: normal;
}
#trim.full:after {
  display: none;
}

<link rel="stylesheet" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://bootswatch.com/cosmo/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<p id="trim">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

Answer 2

嘿，您可以使用具有固定宽度的css和以下属性：

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

然后你可以在你的css中找到类似的东西

 .mytext {
     width: 200px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .mytext.expanded {
     overflow: visible
 }

在你的模板中有这段html

  <p id="trim" class="mytext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p> <div id='expand'>+</div>

并在js：

$('#expand').click(function({
    $('#trim').toggleClass('expanded');
}));

Answer 3

<div id='more'>+</div>

$('#more').click(function({
    $('#trim').text();
}));

修改文本长度OnClick

3 个答案: