线夹紧和解压，点击链接事件

Question

我想用以下方式处理<p>标记中的一些文本

1. 我是使用线夹紧在css，以缩小它为3行。
2. 段落标签"p“中的文本非常长，因此它有一个更多的链接”显示所有“，附加在现在夹紧限制尺寸行的末尾。
3. 点击这个“显示所有”链接，夹紧的文本现在应该打开并显示整个文本，“显示所有”链接也应该消失。

这是我试过的东西。任何帮助都将不胜感激。

<div id="id_1" class="clamp clamp-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 
elit. Ut suscipit libero metus, ac suscipit est iaculis 
sit amet.Suspendisse potenti. Ut ut auctor nisi, ut varius ligula. 
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices 
posuere cubilia Curae; Proin quis imperdiet velit. Etiam tincidunt 
ut tortor ut pellentesque. Cras laoreet convallis arcu, 
vel mollis sem pharetra ut. Nam leo lorem, vestibulum id velit 
ac, pulvinar pretium libero. Praesent facilisis lectus at 
nunc ultricies dictum. Fusce iaculis nibh ut massa facilisis,
sed rutrum metus elementum. Nulla eget tellus at leo 
consectetur ultricies non eget purus. Integer ut finibus 
neque. Vestibulum pretium tortor in leo porta finibus. 
Pellentesque rutrum nisl at risus egestas finibus.
</p>
</div>

* css *

 .clamp {
 display: -webkit-box;
 -webkit-box-orient: vertical; 
 overflow: hidden;
 }

 .unclamp { -webkit-line-clamp: initial !important; }
 .clamp-3 { -webkit-line-clamp: 3; }

* Javascript *

define(["jquery", "domReady!"], function($){

$('.clamp').each(function() {
   var showAll = $('<a href="#" >Show All</a>');
   $(this).after(showAll);

   showAll.on("click", function (){
       $(this).prev().addClass("unclamp");

   });
});
});

这是一个半生不熟的代码，因为我可以使用css类钳和钳-3将它夹成3行，但我有以下问题

*问题*

1. "Show“不是附加在夹紧线的末尾，而是跳到下一行，需要正确地对齐。
2. 如何使“显示所有”在“显示所有”链接被点击之后消失，从而展开所有文本。

Answer 1

您可以使用标准的CSS属性(不是-webkit特定的)并使用3x的max-height line-height。

我也用CSS控制“显示更多/更少”的文本。

​

(function(){

$('.clamp').each(function() {
   var showAll = $('<a href="#" class="clamp-toggle"></a>');
   $(this).after(showAll);

   showAll.on("click", function (){
       $(this).prev().toggleClass("unclamp");

   });
});
})();

.clamp {
 display: block;
 -webkit-box-orient: vertical; 
 overflow: hidden;
 line-height: 1.2em;
}

.clamp p {
  padding: 0;
  margin: 0;
}

.clamp.unclamp { max-height: initial; }
.clamp-3 { max-height: 3.6em; }

.clamp + .clamp-toggle::before {
  content: "Show All...";
  float: right;
}
.clamp.unclamp + .clamp-toggle::before { content: "Show Less..."; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id_1" class="clamp clamp-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 
elit. Ut suscipit libero metus, ac suscipit est iaculis 
sit amet.Suspendisse potenti. Ut ut auctor nisi, ut varius ligula. 
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices 
posuere cubilia Curae; Proin quis imperdiet velit. Etiam tincidunt 
ut tortor ut pellentesque. Cras laoreet convallis arcu, 
vel mollis sem pharetra ut. Nam leo lorem, vestibulum id velit 
ac, pulvinar pretium libero. Praesent facilisis lectus at 
nunc ultricies dictum. Fusce iaculis nibh ut massa facilisis,
sed rutrum metus elementum. Nulla eget tellus at leo 
consectetur ultricies non eget purus. Integer ut finibus 
neque. Vestibulum pretium tortor in leo porta finibus. 
Pellentesque rutrum nisl at risus egestas finibus.
</p>
</div>

​

Answer 2

你可以试试这个。以下是我发现的这里的一个css实现。它的跨浏览器兼容( -Webkit-line-clamp不支持IE和火狐)，工作起来很有魅力。

Css：

 .clamp-3 {    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;  
    }

联署材料：

$('.clamp').each(function() {
   var showAll = $('<a href="#" >Show All</a>');
   $(this).after(showAll);

   showAll.on("click", function (){
       $(this).prev().removeClass("clamp-3");
       $(this).remove();
   });
});

工作示例：https://jsfiddle.net/97bo2vyb/