Question

我希望以下列方式处理<p>标记中的某些文字

我在css上使用线夹，将其缩小到3行。
段落标记中的文字＆＃34; p＆＃34;是很长的，因此它有一个更多的链接＆＃34;显示所有＆＃34;附加在现在夹钳限制尺寸线的末端。
点击此处＆＃34;显示全部＆＃34;链接，夹紧的文本现在应该松开并显示整个文本＆＃34;显示全部＆＃34;链接应该消失。

这是我尝试过的东西。任何帮助将受到高度赞赏。

<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-3将其夹紧到3行，但我有以下问题
*******发布***********

＆＃34; Show All＆＃34;没有被附加到钳位线的末尾，而是它跳到下一行并且需要右对齐。
我如何制作＆＃34;全部显示＆＃34;在＆＃34;显示所有＆＃34;之后消失已单击链接，因此所有文本都已展开。

Answer 1

您可以使用标准CSS属性（不是特定于--webkit）并使用max-height的3倍line-height。

我也在控制＆＃34;显示更多/更少＆＃34; CSS的文字。

＆＃13;

(function(){

$('.clamp').each(function() {
   var showAll = $('<a href="#" class="clamp-toggle"></a>');
   $(this).after(showAll);

   showAll.on("click", function (){
       $(this).prev().toggleClass("unclamp");

   });
});
})();

＆＃13;

.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..."; }

＆＃13;

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

＆＃13;

Answer 2

你可以试试这个。以下是我发现的here纯粹的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/

Line的夹紧和松开，onclick事件

2 个答案: