Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/74.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在具有多个嵌套元素的div上伪造椭圆?_Javascript_Jquery_Html_Css - Fatal编程技术网

Javascript 如何在具有多个嵌套元素的div上伪造椭圆?

Javascript 如何在具有多个嵌套元素的div上伪造椭圆?,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我的结构如下: <div class="post"> <p>In neque elit. Semper amet leo. Pulvinar ullamcorper ac nullam convallis amet nunc scelerisque porta. Dolor eu ornare ligula ut voluptatem. Orci dictum ullamcorper elit sit orci. Etiam lectus vel mattis s

我的结构如下:

<div class="post">
    <p>In neque elit. Semper amet leo. Pulvinar ullamcorper ac nullam convallis amet nunc scelerisque porta. Dolor eu ornare ligula ut voluptatem. Orci dictum ullamcorper elit sit orci. Etiam lectus vel mattis suscipit iure sem imperdiet ante. Sed rutrum potenti magna arcu ullamcorper. Vivamus convallis velit. Eget elit scelerisque tincidunt cras ultrices metus nulla libero et mus luctus. Sagittis orci potenti scelerisque etiam eiusmod tempor pellentesque lobortis rutrum interdum nibh. Tellus quas elit. Pellentesque rhoncus magna. Eleifend in amet. Hac neque est rutrum et dis varius et dui. Vestibulum nulla magna. Magna interdum ac eros bibendum velit. Et amet nunc vel amet vel ligula dictum tristique dolor odio dui. Morbi dolor lectus. Nascetur nullam est.</p>
    <p>Vitae nulla vitae. Pellentesque ullamcorper magna. Non impedit in rhoncus lacus nulla ut vulputate nulla. Eros ultricies leo dolor ut luctus. Maecenas pharetra ut. Metus ut congue. Lacus ut vestibulum. Auctor tortor tempus. Aptent mattis lectus. Condimentum dolore velit maecenas officia arcu velit placerat nullam urna lacus justo. Nunc donec quam neque tortor enim sem eros dui vulputate rhoncus nam. Ut semper ad eu ac vel turpis duis ornare. Euismod mattis ante. Non aliquet eleifend ut mollis eget. Donec placerat at. In porttitor pellentesque. Accumsan sit arcu vestibulum habitant tempor ultrices justo praesent. Dui aliquam mauris in aliquam magna erat quisque orci. Conubia metus proin eu tincidunt wisi bibendum id condimentum in justo dui qui est dapibus. Facilisis eget at.</p>
    <p>Id ac ullamcorper odio urna tortor elit quam elementum. Erat vivamus ut sit massa metus maecenas wisi suspendisse quis hendrerit mauris. Quam at sodales blandit lacus vestibulum. Elit suspendisse quo. Vivamus auctor wisi. Quis id lobortis. Diam sociosqu et elementum erat magna. Elit elit eu. Laoreet habitant tempor pellentesque dictum eget. Ipsum lectus dignissim id elit proin ullamcorper quis morbi.</p>
</div>
等等

我完全支持使用jQuery或JavaScript解决方案,如果它们能工作的话,但正如我所说,它们中的大多数只在
元素上工作,而不是
元素上工作(

这基本上是用于博客文章预览。我想要一个文本样本,但不是全部内容


JS Fiddle为方便起见:

您可以使用伪元素来伪造它:

CSS:

First Paragraph:
Line one Line one Line one Line one Line one Line one Line one Line one 
Line two Line two Line two Line two Line two Line two Line two ...

Second Paragraph:
Line one Line one Line one Line one Line one Line one Line one Line one 
Line two Line two Line two Line two Line two Line two Line two ...
.post {
    max-height: 6em;
    overflow: hidden;
    line-height:1.2em;
    position:relative;
}
.post:after{
    content:"...";
    position:absolute;
    bottom:0; right:0;
    padding:0 .5em;
    background: #fff;
}