Develop Reference

Truncate paragraphs by line not characters

I have multiple items in a div with paragraphs and I would like to truncate them to 2 lines. I have tried to truncate using the height but it results in cut off words. I can't use characters because in some cases the words are long and get pushed to a new line.
I am trying to work with getClientRects() as you'll see in the fiddle below.
Also note that I can't use any plugins for the project I am working on.
I found this example on another post: Working Truncate from stackoverflow post
My Fiddle:
JS Fiddle
var lines = $(".truncate")[0].getClientRects();
var divHeight = 0;
for (var i=0, max = 2; i < max; i++)
divHeight += lines[i].bottom - lines[i].top;
divHeight += i;
$(".truncate").height(divHeight);

There's a number of issues.
The code you're trying to work from takes advantage of a quirk related to display: inline but you don't set display: inline, instead leaving .truncate at the browser default of display: block.
ready isn't a real event and jQuery no longer fakes it when using .on('ready', ...) so your code never runs.
jQuery's .height() requires that the argument be in the form of a CSS height value. This means you need to use something that results in, for example, '50px' rather than just 50.
height is ignored on inline elements so it'll have to be set on the outer element. The code you were working from did this but you didn't follow it.
Your code assumes that the number of lines will always be two or more.
overflow: hidden isn't set so the text itself will push outside its container even if the container was shortened.
All together, your code should look something like this instead:
.item {
width: 400px;
margin: 20px;
display: inline-block;
overflow: hidden;
box-sizing: content-box;
}
.truncate {
display:inline;
}
$(document).ready( function(){
var lines = $(".truncate")[0].getClientRects();
var divHeight = 0;
var max = lines.length >= 2 ? 2 : lines.length;
for (var i=0; i < max; i++) {
divHeight += lines[i].bottom - lines[i].top;
}
divHeight += i;
$(".item").height(divHeight + 'px');
});
JSFiddle

Using the css answer from css-tricks (https://css-tricks.com/line-clampin/) assuming you know the line-height.
.item {
width: 400px;
margin: 20px;
overflow: hidden;
}
.fade {
position: relative;
height: 2.4em; /* exactly two lines */
}
<div class="item fade">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="item fade">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Image page transition

Does anyone have any idea how to have an image transition to another page without re-loading. There is a good example of this on http://nahelmoussi.com/ .
When you click on a case study image, the image gets bigger and stays on the page.
I know you could use CSS Transitions for the animation but what I'm confused about is how you load a whole new page (different page for SEO) and make it so the image never looks like it's reloading?

history.pushState()
The DOM window object provides access to the browser's history through the history object. It exposes useful methods and properties that let you move back and forth through the user's history, as well as -- starting with HTML5 -- manipulate the contents of the history stack.
pushState() takes three parameters: a state object, a title (which is currently ignored), and (optionally) a URL.
And AJAX
AJAX stands for Asynchronous JavaScript And XML. In a nutshell, it is the use of the XMLHttpRequest object to communicate with servers. It can send and receive information in various formats, including JSON, XML, HTML, and text files. AJAX’s most appealing characteristic is its "asynchronous" nature, which means it can communicate with the server, exchange data, and update the page without having to refresh the page.
After animating the image, we can update the browser's history by appending a new location, and use AJAX to fetch the new content.
Manipulating the history allows that the user can navigate back and forth in the same way they would if they had navigated to a new location the traditional way.
We can use AJAX to fetch new data, and optionally change parts or all of the page content to show this new data.
The effect of the combined methods is that after clicking the image:
The image expands.
The rest of the content is either hidden or overwritten.
New data is fetched.
The new data is displayed.
The history is updated.
It appears to the user that they have navigated to a new location (and their browser history will show that they did), but that the image they originally clicked remained on their screen at all times.
An unrefined and basic demo:
Although not fully functional, this will demonstrate the fundamentals of the process if served by a localhost. The scope of the question is too wide for a narrow demo, and a wide enough demo to show the full functionality would require building an entire demonstration website.
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<script async>
( function( W, D ) {
var handlePopstate = function( evt ) {
// handle history navigation through evt.state
console.log( evt.state );
},
getNewContentAndUpdateHistory = function( d, p ) {
// create and call ajax for new content using destination URL
console.log( d );
// update the browser's history and the history.state
history.pushState( { ps: p }, "", d );
// handle history navigation through history.state
console.log( history.state );
},
init = function() {
D.addEventListener( "click", function( evt ) {
var trg = evt.target;
if ( trg.tagName.toLowerCase() === "img" && !trg.classList.contains( "bg" ) ) {
var dest = trg.getAttribute( "data-href" ),
page = /(\d+)/.exec( dest )[ 1 ];
trg.classList.add( "bg", "_" + page );
// load, parse and display new content and update the browser's history
getNewContentAndUpdateHistory( dest, page );
}
}, false );
};
if ( /^(?:complet|interactiv)e$/.test( D.readyState ) ) {
init();
} else {
W.addEventListener( "DOMContentLoaded", init, false );
}
W.addEventListener( "popstate", handlePopstate, false );
} ( window, document ) );
</script>
<style>
html {
font-size: 10px;
}
body {
font-family: sans-serif;
font-size: 1.6rem;
margin: 0;
padding: 0;
}
img {
position: relative;
display: block;
width: 400px;
height: 200px;
cursor: pointer;
transition: width 1s, height 1s;
}
.bg {
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
cursor: default;
}
._2 {
z-index: 2;
}
._3 {
z-index: 3;
}
._4 {
z-index: 4;
}
</style>
</head>
<body>
<h1>Foo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<img src="http://lorempixel.com/400/200" data-href="page/2/"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<img src="http://lorempixel.com/400/200" data-href="page/3/"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<img src="http://lorempixel.com/400/200" data-href="page/4/"></p>
</body>
</html>

Optimize HTML reflow when typing in large contenteditable

I'm working on a large text editor application in Chromium. The editable content resides in a contenteditable div. This div can contain divs and spans which get various classes applied to them to create rich content. The trouble I have is with a very large amount of text/html in my contenteditable div, typing is very slow since it causes the entire document to reflow (all of my div/spans inside of my contenteditable are position:relative). If I make these position:absolute, typing is fine since reflow does not occur, but each child div/span overlaps.
Does anyone have a method for preserving the non-overlapping flow of position:relative, but without having to reflow the ENTIRE document when I type some text, even if it doesn't change line geometry?
-- Edit --
Example:
https://jsfiddle.net/05xfc6pj/
CSS
.editable {
position: absolute;
}
.wrapper {
position: relative;
}
.title {
font-weight: bold;
background-color: red;
width: 100%;
}
.body {
width: 100%;
margin-bottom:20px;
}
HTML
<div class="editable" contenteditable="true">
<div class="wrapper">
<div class="title">Title</div>
<div class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
</div>
...
</div>
(Note, if the example isn't slow for you, copy and paste everything inside of .editable a few times)
I am using backbone.js to render these .wrapper items; would it be feasible making .wrapper have position:absolute and then calculating the position with JS (we know the height of each div), and setting a top offset?

CSS or JavaScript putting background color into only part of a paragraph

Here is what I have so far and here is the link to see it online.
p { line-height: 2; }
.highlight { background-color: yellow; }
The goal is to wrap the quoted content like below (no border is necessary but I want the whole background including the space between lines to be colored)
I see that the picture isn't clear but I hope you can figure out the idea.
The current version only highlights the lines and the space between lines(due to line height being taller than 1) is not highlighted.
Is there any way to achieve this either in CSS or in JavaScript?

One way to do this is to give the marked text a top and bottom padding.
p {line-height:2}
mark {padding:.5em 0}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<mark>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</mark>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Hi you can use the span tag and set the background of that span so it will work like
<p>this is the dummy text without any background <span style='background:yellow'> This text with the background colour</span> this text have no background</p>

Fit text inside div when borswer is resized

Is it possible to make text inside a div to fit its DIV while the bowser window is resized?
I read this and this and few other about Fit Text to DIV but none of them gives an accepted answer about fit text when browser window is resized.
<div id="wrapper">
<div class= "tfz">FIT THIS TEXT</div>
</div>
jsFiddle

Try with -
word-wrap: break-word;
and set the width in %. Hope that will fix the problem.
Example
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
Style
div {
width: 500px;
word-wrap: break-word;
font-size: 2vw;
}
Check it here

With width given as px, you really cannot resize it, unless you use some javascript/jquery! So if it is really important you to mention width in px you just can achieve it through jquery/javascript.
So if you agree to mention it in % then definitely you can manage it through CSS as below:
#wrapper{
position: relative;//no need to change this
width: 50%;
word-wrap: break-word;//apply this.
height: auto;
}
DEMO