Does anyone know of a clean and easy way to truncate a section of text to two lines. This is what I am trying to truncate (p element):
<blockquote><p>“<?=$test_entry ?>”</p></blockquote><cite><?=$test_name ?></cite>
I have tried various solutions including clamp.js (which doesnt even work properly in the example supplied)
I have tried CSS3 solutions using text-overflow but these only truncate to one line.
All other javascript examples use string length which breaks if the text size changes, if special chars are encoded and under many other conditions.
I am happy to change the markup if necessary I just want to be able to truncate text to fit two lines within a div box and have it end with an elipses (...) or even better with (..."). I thought this would be straightforward but apparantly not.
Can anyone point me to an existing solution or give me a clue where to start with this. Any help much appreciated.
Here you can find an existing solution based on jQuery, which should be working cross browser, in this SO question.
This is a very simple solution to truncate the multiline paragraph and this will also add the ellipsis dots at the end of the last line.
p.truncate_text {
color:red;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis justo nibh. Phasellus ac ante enim. Mauris ullamcorper mauris nec laoreet lacinia. Sed interdum tincidunt tempor. Cras euismod, tellus id consequat varius, est lectus sagittis justo, sit amet egestas sem dolor sit amet arcu. In commodo nibh ac nisi tincidunt tincidunt. Nullam suscipit, mi nec posuere imperdiet, odio est pellentesque arcu, at varius massa ex nec urna.</p>
<p class="truncate_text">This paragraph will truncate into 3 lines Quisque ut purus nunc. Aenean vitae lectus maximus, fermentum justo quis, lobortis neque. Curabitur lacinia in massa in efficitur. Praesent et dolor et ex sodales volutpat vel lobortis ligula. Maecenas convallis luctus tempus. Vivamus non libero nisi. Donec facilisis, odio sed dictum consectetur, eros dolor pellentesque quam, ut ornare est ligula eu ligula. Etiam elementum nibh lectus, quis sodales massa malesuada vitae. Etiam finibus quam eget condimentum rutrum. Donec et velit ipsum. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis justo nibh. Phasellus ac ante enim. Mauris ullamcorper mauris nec laoreet lacinia. Sed interdum tincidunt tempor. Cras euismod, tellus id consequat varius, est lectus sagittis justo, sit amet egestas sem dolor sit amet arcu. In commodo nibh ac nisi tincidunt tincidunt. Nullam suscipit, mi nec posuere imperdiet, odio est pellentesque arcu, at varius massa ex nec urna.</p>
Use the textarea element to limit text rows!
<textarea rows="2" readonly disabled>Try enameling the ricotta broccolis with aged champaign and rum, warmed. </textarea>
You could then use a pseudo element :after to add an ellipsis or a 'Read more'.
Don't forget the attributes 'readonly' and 'disabled'. Readonly prevents textarea from being interacted with by the user. Disabled prevents any forms in the page from submitting the values.
Related
I'm trying to implement a function that yields highlighted and summarized preview of the given text. Please see the following code snippet.
<div>
Search:
<input value='vestibulum' disabled/>
</div>
<div style='margin-top: 20px'>Output I want:</div>
<div style='border: 1px solid #000; padding: 10px'>
...diam lectus <mark>vestibulum</mark> risus, eu <mark>vestibulum</mark> turpis quam in lorem. Vivamus posuere nibh leo, sit amet pharetra velit convallis sed. Sed porta convallis justo ac auctor. <mark>Vestibulum</mark> ante ipsum primis in faucibus orci luctus...
</div>
<div style='margin-top: 20px'>Original Text:</div>
<div style='border: 1px solid #000; padding: 10px'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at lacus tempus, pharetra dui vel, egestas massa. Integer metus enim, varius sed quam sed, convallis volutpat lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur, tortor quis sagittis sollicitudin, diam lectus vestibulum risus, eu vestibulum turpis quam in lorem. Vivamus posuere nibh leo, sit amet pharetra velit convallis sed. Sed porta convallis justo ac auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla et luctus leo, eu dignissim nunc. Phasellus vel fringilla sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean et dui ut ipsum pretium ullamcorper. Aenean hendrerit dolor et lorem auctor ullamcorper.
</p>
<p>
Donec aliquet, purus ut tempor efficitur, velit eros luctus turpis, in pretium elit augue vel eros. Morbi eget dui ullamcorper, semper magna sit amet, cursus nulla. Aenean augue dolor, varius eu orci a, efficitur auctor diam. Quisque tempor lacus dolor. Aliquam erat volutpat. Donec imperdiet pellentesque nunc, sed accumsan sem lacinia sed. In hac habitasse platea dictumst. Nam placerat odio et leo ultricies ultrices. Cras nulla lacus, maximus in risus ut, auctor auctor vestibulum.
</p>
</div>
The function I want to implement should look like this:
const getSummarizedPreview = (query, text, windowSize) => {
// query: The word that should be highlighted. It's just one word, not a phrase.
// text: Original Text.
// windowSize: The maximum length of text returned.
}
Note that the last word of the text is also vestibulum, but getSummarizedPreview smartly chose more relevant part of the text based on the frequency of the query.
I think this might be pretty complicated to implement, so any advice, pseudocode, or introduction to library that does the simliar thing would be appreciated.
Thank you.
You can use full text search of Elasticsearch. See quick intro here.
OR you can implement this feature by yourself:
Look in your original text i see it have multi paragraph ( tag). You can split it into an array, then loop all of this array elements.
In the loop, using regex like below to find count frequency of appearance of query word:
var temp = "This is a string.";
var count = (temp.match(/is/g) || []).length;
console.log(count);
Get element have max count.
Replace query word with highlighted query word, like: vestibulum with <mark>vestibulum</mark>
Return formatted string for display highlighted matched query word.
This is an interesting question and I am also looking for a better solution.
I am trying to set my site background with Trianglify. The site I am trying to use it with is here. It doesn't have any scrolling. None of the examples work for me (they all place the generated image below the rest of the content, not as the background). I also tried the suggestion in issue #58 but that didn't work at all. Any help would be much appreciated. Thanks.
You could just change the position of your element that contains the background with CSS. I hope this answer to you question.
canvas {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae purus quis dolor lacinia gravida. Ut sit amet purus vel tellus faucibus posuere. Pellentesque ut sapien quis elit luctus tincidunt. Etiam eros nisl, semper sit amet malesuada et, aliquet id arcu. Quisque leo ipsum, ullamcorper nec urna ac, maximus finibus tortor. Curabitur non justo condimentum, consectetur diam sed, lobortis lorem. Nulla scelerisque hendrerit nunc, eu aliquam est pretium vel. Maecenas risus mi, ultrices eget mollis sed, consectetur id eros. Donec ac mauris mattis, tincidunt lacus sit amet, congue lacus. Vivamus sed nulla sit amet dolor porttitor dictum. Cras quis mi massa. Quisque lobortis consequat ante sit amet blandit. In dictum iaculis elementum. Maecenas quis congue eros. Phasellus aliquam, libero ut fermentum accumsan, quam sem egestas elit, vel posuere purus dui id mauris. Praesent vel risus ac felis dapibus finibus in nec enim.</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.1.0/trianglify.min.js"></script>
<script>
var pattern = Trianglify({
width: window.innerWidth,
height: window.innerHeight,
cell_size: 30 + Math.random() * 100,
x_colors: 'random',
y_colors: 'match_x',
stroke_width: 3
});
document.body.appendChild(pattern.canvas())
</script>
edit: First expand snippet, then run code.
edit2: Forgot left: 0.
i am using overflow:hidden property in the css which makes the text to be hidden when it goes outside the container.
can any one please let me know if there is a way to capture the height of the whole text including the overflow text
as well. height() value is just returning me the height of the container and not the overflow text ?
Use scrollHeight, see documentation.
$('#id')[0].scrollHeight
Live demo
JQuery
$('document').ready(function(){
$("#info").text("Width of real text: "+$('.real').css('width'));
$("#info").html($("#info").html() + "<br/>Height of real text: "+$('.real').css('height'));
});
HTML
<div class="overflow">
<div class="real">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non justo eget eros accumsan mattis. In a auctor magna, sit amet dapibus sapien. Mauris lectus justo, ornare eu pretium in, fringilla nec risus. Phasellus at risus dapibus, imperdiet tellus lacinia, feugiat risus. Nullam ultrices luctus ante, id aliquet eros. In iaculis elit ut hendrerit facilisis. Cras tristique non orci non sodales. Aliquam semper libero sed diam venenatis, imperdiet rhoncus augue eleifend. Nullam euismod mauris neque, ac semper erat posuere a. Nam a tortor commodo, adipiscing nisl vel, sollicitudin nisl. Suspendisse adipiscing laoreet neque sit amet tempor.
</div>
</div>
<div id="info"></div>
CSS
.overflow{
width:200px;
height:100px;
overflow:hidden;
}
.real{
width:300px;
}
#info{
background-color:gray;
margin-top:15px;
}
Let's assume that I have the following text within a single <p>... </p>
When a user selects a couple of words within the text, lets assume the first Quisque vestibulum is selected, I get the selected text with window.getSelection().toString(); then I apply some CSS tricks, lets say I underline the text.
When the user comes back one month later, I would like to underline same text again. How can I get an exact reference for the selected text for future reference? I don't want to highlight the second Quisque vestibulum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at
dolor sit amet augue tempor venenatis vitae et nibh. Donec dignissim
fringilla fermentum. In facilisis consectetur risus. Nam vel mauris
magna, a feugiat nisl. Quisque vestibulum, neque eu tristique
tristique, tortor mauris ornare magna, at ultricies augue orci sed
enim. Nulla magna ligula, dapibus vel commodo ac, sodales ut sem. Duis
lorem massa, consectetur sed molestie eget, posuere eu magna.
Pellentesque sollicitudin mattis facilisis. Nunc pulvinar metus et
diam dignissim sit amet pellentesque metus pretium. Quisque vestibulum, maecenas vel leo
sit amet diam iaculis sollicitudin.
You could use the search() or indexOf() and store the position of the string as well as the actual selected text.
I have a div, which has content in it.
The content could be really long, or the content could be really small.
I don't want the content to stretch the page on page load if it is long, I want them to click a "more" link and it will slide down and reveal the rest of the content.
For example:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate mi egestas ligula feugiat volutpat. Morbi eros felis, aliquam in varius id, sodales quis nunc. Nulla sagittis consectetur arcu, sed auctor odio placerat quis. Praesent vitae lacus neque. Curabitur ultricies tristique sollicitudin. Suspendisse malesuada nunc at augue interdum at facilisis ipsum gravida.
Below it is a bar or link that says "show the rest"
Up on click, this div lengthens and shows the rest of the content:
Nunc congue sapien sed sem tincidunt ut adipiscing neque lacinia. Praesent facilisis quam sed tellus sodales id tristique massa ullamcorper. Donec sem turpis, cursus in elementum id, tincidunt a libero. Etiam feugiat, sem quis dictum imperdiet, nisl ante pharetra erat, ut ornare nulla justo ac sapien.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse vulputate mi egestas
ligula feugiat volutpat. Morbi eros
felis, aliquam in varius id, sodales
quis nunc. Nulla sagittis consectetur
arcu, sed auctor odio placerat quis.
Praesent vitae lacus neque. Curabitur
ultricies tristique sollicitudin.
Suspendisse malesuada nunc at augue
interdum at facilisis ipsum gravida.
Nunc congue sapien sed sem tincidunt
ut adipiscing neque lacinia. Praesent
facilisis quam sed tellus sodales id
tristique massa ullamcorper. Donec sem
turpis, cursus in elementum id,
tincidunt a libero. Etiam feugiat, sem
quis dictum imperdiet, nisl ante
pharetra erat, ut ornare nulla justo
ac sapien.
I know itll be hard to control what will be cut off, blah blah but it isn't for that type of thing. The div does not contain text, it contains a list of features, for example X listing may have 4 features, Z listing may have 14 features, instead of the page stretching if the listing has 14 features listed vertically, we want it to only show a few and then they must click "show me more" for it to slide down and reveal the rest.
How would I go about doing this? Even a jsfiddle to demonstrate it?
Thank you :)
Try giving a fixed height to the div. You can use CSS for this. Then compare height of the list with the outer div. If it is greater show the bar with link show more. On click of this bar you can manage the height of outer div. Like this -
CSS
.parentDiv{
height:some fixed height px;
overflow: auto;
}
Jquery
var parentHeight = $('.parentDiv').height();
var listHeight = $('#List').outerHeight(true);
if(parentHeight < listHeight) {
$('#linkBar').show();
}
$('#linkBar').click(function(){
//$('.parentDiv').height(listHeight);
//OR you can use following code to animate the div
$('.parentDiv').animate({'height': listHeight}, 'slow')
});
Here's a working demo of my implementation (coincidentally similar to the answer given above; I was making this before any answers were given): http://jsfiddle.net/7fhrN/15/
It works for users without JavaScript and gives graceful degradation to your page. Try switching the JS library to something random on JsFiddle and click Run.
HTML:
<div class="stretchy">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate mi egestas ligula feugiat volutpat. Morbi eros felis, aliquam in varius id, sodales quis nunc. Nulla sagittis consectetur arcu, sed auctor odio placerat quis. Praesent vitae lacus neque. Curabitur ultricies tristique sollicitudin. Suspendisse malesuada nunc at augue interdum at facilisis ipsum gravida.</div>
<div class="stretchy">Nunc congue sapien sed sem tincidunt ut adipiscing neque lacinia. Praesent facilisis quam sed tellus sodales id tristique massa ullamcorper. Donec sem turpis, cursus in elementum id, tincidunt a libero. Etiam feugiat, sem quis dictum imperdiet, nisl ante pharetra erat, ut ornare nulla justo ac sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate mi egestas ligula feugiat volutpat. Morbi eros felis, aliquam in varius id, sodales quis nunc. Nulla sagittis consectetur arcu, sed auctor odio placerat quis. Praesent vitae lacus neque. Curabitur ultricies tristique sollicitudin. Suspendisse malesuada nunc at augue interdum at facilisis ipsum gravida. Nunc congue sapien sed sem tincidunt ut adipiscing neque lacinia. Praesent facilisis quam sed tellus sodales id tristique massa ullamcorper. Donec sem turpis, cursus in elementum id, tincidunt a libero. Etiam feugiat, sem quis dictum imperdiet, nisl ante pharetra erat, ut ornare nulla justo ac sapien.</div>
CSS:
.stretchy
{
margin: 20px;
padding: 5px;
background-color: rgb(240, 240, 240);
overflow: hidden;
position: relative;
padding-bottom: 20px;
}
.inner
{
max-height: 120px;
overflow: hidden;
}
.reveal
{
position: absolute;
bottom: 0px;
}
JavaScript:
$(document).ready(function()
{
$('.stretchy').each(function()
{
if ($(this).height() > 130)
{
$(this).replaceWith('<div class="stretchy"><div class="inner">' + $(this).html() + '</div>Show me more lipsum</div>');
}
});
$('.reveal').toggle(function()
{
$(this).parent().find('.inner').animate({maxHeight: '1000px'});
}, function() {
$(this).parent().find('.inner').animate({maxHeight: '120px'});
});
});
Basically, I iterate over all the <div>s with the class stretchy. If they are too big, I replace them with a <div> with a container and a link at the bottom which changes the max-height of the inner <div> to some ridiculous value.
Just try it. Seeing > having me explain it to you.