行夹紧和松开，链接的点击事件

Line clamping and unclamping, onclick event of Link

本文关键字：链接 事件      更新时间：2023-09-26

我想通过以下方式处理<p>标签中的一些文本

  1. 我在 css 上使用行钳制将其缩小到 3 行。
  2. 段落标签"p"中的文本很长，因此在现在的钳制限制尺寸行的末尾附加了一个更多的链接"全部显示"。
    3. 单击此"全部显示"链接
  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 类 clamp 和 clamp-3 将其固定为 3 行，但我有以下问题
问题***********

  1. "全部显示"不会附加到夹紧行的末尾，而是跳到下一行，需要右对齐。
    2. 单击"全部
  2. 显示"链接后，如何使"全部显示"消失，从而展开所有文本。
您可以使用

标准的CSS属性(不是特定于--webkit(并使用line-height的3倍max-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>

你可以

试试这个。以下纯粹是我在这里找到的 css 实现。它是跨浏览器兼容的(-Webkit-line-clamp IE和Firefox不支持(，并且像魅力一样工作。

css ： 

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

Js ： 

$('.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/

相关文章：