Answer the question
In order to leave comments, you need to log in
After a certain number of words - give the rest blur, how to implement?
Hello.
There is html markup:
<div class="row">
<div class="col-sm-8">
<h1 class="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
</div>
</div>
<div class="row">
<div class="col-md-8 col-sm-7">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla sunt, quisquam voluptate accusantium quam expedita praesentium dolorum molestiae, iure repellendus ea maxime excepturi nisi laborum debitis. Aut quas quam, aperiam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla sunt, quisquam voluptate accusantium quam expedita praesentium dolorum molestiae, iure repellendus ea maxime excepturi nisi laborum debitis. Aut quas quam, aperiam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla sunt, quisquam voluptate accusantium quam expedita praesentium dolorum molestiae, iure repellendus ea maxime excepturi nisi laborum debitis. Aut quas quam, aperiam.</p>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla sunt, quisquam voluptate accusantium quam expedita praesentium dolorum molestiae, iure repellendus ea maxime excepturi nisi laborum debitis. Aut quas quam, aperiam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla sunt, quisquam voluptate accusantium quam expedita praesentium dolorum molestiae, iure repellendus ea maxime excepturi nisi laborum debitis. Aut quas quam, aperiam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla sunt, quisquam voluptate accusantium quam expedita praesentium dolorum molestiae, iure repellendus ea maxime excepturi nisi laborum debitis. Aut quas quam, aperiam.</p>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla sunt, quisquam voluptate accusantium quam expedita praesentium dolorum molestiae, iure repellendus ea maxime excepturi nisi laborum debitis. Aut quas quam, aperiam.</p>
<div class="share-wrap row">
<div class="row">
<div class="col-md-6 text-right">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="col-md-6">
<ul class="share">
<li class="fb"><a href="#"></a></li>
<li class="tw"><a href="#"></a></li>
<li class="gpl"><a href="#"></a></li>
<li class="pint"><a href="#"></a></li>
<li class="ln"><a href="#"></a></li>
</ul>
</div>
</div>
</div>
<div> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis animi recusandae atque temporibus dignissimos possimus reiciendis excepturi optio, cum dolores error earum vitae dolor fuga quam, corrupti quibusdam ab pariatur?
<p></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione nihil fugiat repellat, accusantium voluptatum officiis deleniti adipisci, quo voluptates id ad quia molestias eum nulla magnam repellendus at commodi quaerat? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas amet ad accusantium non praesentium eligendi distinctio magnam saepe, esse laboriosam molestiae beatae laudantium, sapiente soluta alias repudiandae ipsum, corporis velit?</p>
</div>
</div>
</div>
</div>
Answer the question
In order to leave comments, you need to log in
$('h1').each(function(i,el){ //обрабатываем все h1
var t = el.text(); //взяли текст
var f = t.substring(0,100); //взяли первые 100 символов
var l = t.substring(100); //взяли все после 100
el.html(f+'<span class="blur">'+l+'</span>'); //обрамили все после 100 в спан с классом
});
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question