I'd like to truncate the text-overflow inside my td elements with dots and a button element. I'm having trouble leaving enough space at the end of the line to display a clipboard button. Below is my attempt with HTML/CSS:
table,
tr,
td {
border: 1px solid black;
}
table {
table-layout: fixed;
width: 100%;
}
td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<table>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<button>📋</button>
</td>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<button>📋</button>
</td>
</tr>
</table>
I've also tried removing the button elements from my HTML so I could insert the ellipsis and button element through JavaScript. I'm not sure how to determine the cutoff length before I insert them. Below is my attempt with JavaScript:
(function addEllipsis(){
const eles = document.getElementsByTagName('td');
for (let i = 0; i < eles.length; ++i){
eles[i].innerHTML = eles[i].textContent.slice(0, -/*magic number*/) + '…<button>📋</button>';
}
})();
You could wrap with some parent component inside the div like this .And add the parent component display:flex.
table,
tr,
td {
border: 1px solid black;
}
table {
table-layout: fixed;
width: 100%;
}
td div {
display: flex;
align-items: center;
}
td div p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
button{
width:30px;
height:30px;
}
<table>
<tr>
<td>
<div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button>📋</button>
</div>
</td>
<td>
<div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button>📋</button>
</div>
</td>
</tr>
</table>
Related
I looked at some articles on the internet but I couldn't find what I wanted. After the site loads for the first time, when I scroll and scroll to a paragraph, I want the text to scroll from the bottom and come after 1 second.Like on this site:https://www.armoli.com/.
For example I want to apply it here
<h6 style="margin-right: 70px;" class="section-title text-center">Our Solutions</h6>
<h6 style="margin-right: 120px;" class="section-subtitle text-center mb-5 pb-3">We offer efficient, high performance and guaranteed solutions with our experienced team having strong references</h6>
<div class="solutionout1">
<img class="solu" style="height:80px ;" src="assets/imgs/webdevelop.png" alt="web development logo" >
<div ><p class="solutionhead">Web Development</p><p class="solutiontext">
We offer fast, profitable, safe and effective solutions in the light of the latest innovations to those who entrust us with their companies' showcases in the internet world.</p></div>
</div>
HTML, CSS, and JavaScript scroll reveal animations
window.addEventListener('scroll', reveal);
function reveal(){
var reveals = document.querySelectorAll('.reveal');
for(var i = 0; i < reveals.length; i++){
var windowheight = window.innerHeight;
var revealtop = reveals[i].getBoundingClientRect().top;
var revealpoint = 150;
if(revealtop < windowheight - revealpoint){
reveals[i].classList.add('active');
}
else{
reveals[i].classList.remove('active');
}
}
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #1D212B;
}
section{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section:nth-child(1){
color: #fff;
}
section:nth-child(2){
color: #1D212B;
background: #fff;
}
section:nth-child(3){
color: #fff;
}
section:nth-child(4){
color: #1D212B;
background: #fff;
}
section .container{
margin: 100px;
}
section h1{
font-size: 60px;
}
section h2{
font-size: 40px;
text-align: center;
text-transform: uppercase;
}
section .cards{
display: flex;
}
section .cards .text-card{
background: #2696E9;
margin: 20px;
padding: 20px;
}
section .cards .text-card h3{
font-size: 30px;
text-align: center;
text-transform: uppercase;
margin-bottom: 10px;
}
#media (max-width: 900px){
section h1{
font-size: 40px;
}
section .cards{
flex-direction: column;
}
}
.reveal{
position: relative;
transform: translateY(150px);
opacity: 0;
transition: all 2s ease;
}
.reveal.active{
transform: translateY(0px);
opacity: 1;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Reveal</title>
</head>
<body>
<section>
<h1>Reveal Elements On Scroll</h1>
</section>
<section>
<div class="container reveal">
<h2>Your Title</h2>
<div class="cards">
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</section>
<section>
<div class="container reveal">
<h2>Your Title</h2>
<div class="cards">
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</section>
<section>
<div class="container reveal">
<h2>Your Title</h2>
<div class="cards">
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</section>
</body>
</html>
const intersectionCallback = (entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
let elem = entry.target;
if (entry.intersectionRatio >= 0.75) {
elem.classList.add("animate");
}
}
});
};
const Animateditems = document.querySelectorAll("div.text");
let options = {
threshold: 1.0,
};
let observer = new IntersectionObserver(intersectionCallback, options);
Animateditems.forEach((item) => {
observer.observe(item);
});
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
html {
font-size: 66.6%;
}
.scrolldown {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
h1 {
font-size: 3rem;
}
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
gap: 2rem;
}
.flex-container > div {
flex: 1 1 100%;
border: 0.1rem solid black;
padding: 2rem;
margin: 2rem;
}
.flex-container > div.animate p {
animation: fadeIn 2s;
opacity: 1;
}
.flex-container > div.animate h2 {
animation: fadeIn 2s;
opacity: 1;
}
.flex-container > div h2 {
font-size: 2.5rem;
opacity: 0;
transform: translateY(0rem);
}
.flex-container > div p {
font-size: 1.8rem;
opacity: 0;
}
#media screen and (min-width: 650px) {
.flex-container > div {
flex: 1 1 40%;
border: 0.1rem solid black;
}
}
#keyframes fadeIn {
from {
transform: translateY(2rem);
opacity: 0;
}
to {
transform: translateY(0rem);
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>animation</title>
</head>
<body>
<div class="scrolldown"><h1>scroll down</h1></div>
<div class="flex-container">
<div class="text">
<h2>This is a title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel
inventore, aut id laboriosam reprehenderit consectetur? Praesentium,
aperiam corporis. Iste asperiores molestiae, itaque a minus dicta! Id
omnis suscipit iure illum.
</p>
</div>
<div class="text">
<h2>This is a title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel
inventore, aut id laboriosam reprehenderit consectetur? Praesentium,
aperiam corporis. Iste asperiores molestiae, itaque a minus dicta! Id
omnis suscipit iure illum.
</p>
</div>
<div class="text">
<h2>This is a title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel
inventore, aut id laboriosam reprehenderit consectetur? Praesentium,
aperiam corporis. Iste asperiores molestiae, itaque a minus dicta! Id
omnis suscipit iure illum.
</p>
</div>
<div class="text">
<h2>This is a title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel
inventore, aut id laboriosam reprehenderit consectetur? Praesentium,
aperiam corporis. Iste asperiores molestiae, itaque a minus dicta! Id
omnis suscipit iure illum.
</p>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Here is a complete vanilla solution. (open it in full screen mode)
I've got a side scrolling / horizontal layout site I'm building. I use a function to test whether or not an element is in the viewport on "normal" vertical layout sites in order to add classes, animations, etc. once it comes into view.
I'm trying to get the same effect for the horizontal layout, but to no avail.
Here is the regular version of the function -
$.fn.isInViewport = function() {
if ( $(this).length ) {
var elementTop = $(this).offset().top;
}
var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
And here is the way I tried it for horizontal layouts, which didn't work.
$.fn.isInViewport = function() {
if ( $(this).length ) {
var elementLeft = $(this).offset().left;
}
var elementRight = elementLeft + $(this).outerWidth();
var viewportLeft = $(window).scrollLeft();
var viewportRight = viewportLeft + $(window).width();
return elementRight > viewportLeft && elementLeft < viewportRight;
};
You call the function like so
$(".element").each(function() {
if ( $(this).isInViewport() ) {
$(this).addClass("animate-element");
}
});
Using jquery its pretty easy, All yo have to do is $(element).on('scroll',(--function--)) and then you can use $(this).offset().left to get the pixel on its left and when you get the offset of left, you can just do whatever you want. Check the snippet below for an working example. (if possible run in smaller screen like mobile)
$("#timeline").on('scroll', function() {
$("#timeline .each").each(function(){
let left = $(this).offset().left;
if(left >-50 && left< (window.innerWidth - 100)){
$(this).addClass('mvisible')
}
else{
if($(this).hasClass('mvisible')){
$(this).removeClass('mvisible')
}
}
});
});
.timeline{overflow-x:auto;width:100%}
.timeline .warp{display:flex;width:1600px;padding:50px 100px 50px 30px;}
.timeline .each{width:185px;}
.timeline .desc{padding:15px;border-radius:4px;background:#08f;color:#fff;width:100%;transform:translateY(50px);opacity:0;transition:0.4s}
.timeline .mvisible .desc{transform:translateY(0);opacity:1}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="timeline" id="timeline">
<div class="warp">
<div class="each mvisible">
<div class="desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="each">
<div class="desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="each">
<div class="desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="each" >
<div class="desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="each" >
<div class="desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="each">
<div class="desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="each">
<div class="desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="each">
<div class="desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</div>
As mentioned in the comments IntersectionObserver is a good place to start
const inViewObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// do stuff when in view
entry.target.classList.add('in-view')
document.body.dataset.log = 'Element in view - well done 😃'
} else {
// do stuff when not in view
entry.target.classList.remove('in-view')
document.body.dataset.log = 'Element not in view - try to find it 🔍'
}
})
}, { threshold: .5 })
const elm = document.querySelector('.element')
inViewObserver.observe(elm)
body {
/* trigger scroll in both directions */
width: 300vw;
height: 300vh;
display: grid;
place-items: center;
}
body::before {
content: attr(data-log);
position: fixed;
top: 0;
left: 0;
}
.element {
background: tomato;
width: 10rem;
height: 10rem;
transition: all 600ms 300ms;
transform: scale(0.25) rotate(360deg);
}
.in-view {
background: olive;
transform: none;
border-radius: 1rem;
}
<div class="element"></div>
I have pages with HTML that look like this:
<div class="row">
<div class="col-md-12">
<h2>Some Title</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Now I need to have the first Lorem ipsum text wrapped in <p></p> tags aswell. Is there a way to detect this and do it with regex?
I would be using regex to make these changes directly in the database.
Since your structure is fixed it's just a matter of
Finding the first non-empty TextNode
Creating a p element
Substituting the text node with the paragraph inside the parent node.
I made the paragraphs green so you can see the effect. Just click the "Wrap" button to see it in action.
function wrap() {
let div = document.querySelector('div.row>div.col-md-12'); // get the container
for (let i = 0; i < div.childNodes.length; i++) { // loop through children
let n = div.childNodes[i];
if (n.nodeName == "#text" && n.textContent.trim() !== '') { // children found!
let p = document.createElement('p'); // create a `p` element
p.textContent = n.textContent; // put the original text inside
n.parentNode.replaceChild(p, n); // swap!
break; // we're done here
}
}
}
p {
background-color: green;
}
<div class="row">
<div class="col-md-12">
<h2>Some Title</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<button onclick="javascript:wrap()">Wrap</button>
I used regex search, and when find the string, make a child element of class col-md-12 and removed another string without elements!
<html>
<body>
<div class="row">
<div class="col-md-12">
<h2>Some Title</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</body>
<script>
var string = document.getElementsByTagName('html')[0].innerHTML;
var regex = /Lorem ipsum[a-zA-Z0-9_ _,_.]*/g;
var save = regex.exec(string)[0];
document.getElementsByTagName('html')[0].innerHTML = document.getElementsByTagName('html')[0].innerHTML.replace(save, "");
var first = document.createElement("p");
var text = document.createTextNode(save);
first.appendChild(text);
document.getElementsByClassName("col-md-12")[0].appendChild(first);
</script>
</html>
My code seems fine (or maybe it's not), when I try it on online platforms it seems to work but it doesn't work when I run it locally. For example, when I put in the exact code in w3school's try it in editor there seems to be no problem.
This is the javascript file I'm using:
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"
When I tried looking online I keep getting answers saying that you need a jquery file which I'm sure I have.
Help is very much appreciated.
Edit: Earlier on in my code I used "content2" instead of "content". That was a mistake, I was just messing around with my code and forgot to change it back. It still doesn't work with "content".
<div class="prtbox">
<img src="graphics/tmp/xx1.png" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="prtbox">
<img src="graphics/tmp/xx2.png" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="prtbox">
<img src="graphics/tmp/xx3.png"class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
.partnerimg{
width: 250px;
padding-bottom: 2%;
cursor: pointer;
}
.prtbox{
padding-bottom: 30px;
width: 33%;
display: inline-block;
}
.partnerdesc{
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
var coll = document.getElementsByClassName("partnerimg");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
EDIT: As the problem seems to lie with code on my side that i have not shown here, i will list my .html code here. I am only using a html and css file, and my entire css file has been shown
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
var coll = document.getElementsByClassName("partnerimg");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = this.scrollHeight + "px";
}
});
}
</script>
<link rel="stylesheet" type="text/css" href="css/index_styles2.css">
</head>
<body>
<div class="prtbox">
<img src="graphics/tmp/ca.png" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="prtbox">
<img src="graphics/logob.eps" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</body>
</html>
Try placing your script toward the bottom of your HTML document, at least after the elements it uses. It's probably running before the DOM has finished loading so the elements haven't been created yet causing it to throw an error.
As already pointed out, jquery is not required over here. The other issue is, this code will not work in online editors also, as the element content2, whose height you are trying to access is not defined. Changing it to the following will also work for you -
content.style.maxHeight = content.scrollHeight + "px";
Try as below:
var coll = document.getElementsByClassName("partnerimg");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = this.scrollHeight + "px";
}
});
}
.partnerimg{
width: 250px;
padding-bottom: 2%;
cursor: pointer;
}
.prtbox{
padding-bottom: 30px;
width: 33%;
display: inline-block;
}
.partnerdesc{
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<div class="prtbox">
<img src="graphics/tmp/xx1.png" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="prtbox">
<img src="graphics/tmp/xx2.png" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="prtbox">
<img src="graphics/tmp/xx3.png"class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
I have try below code in local system and its working fine. Check it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.partnerimg {
width: 250px;
padding-bottom: 2%;
cursor: pointer;
}
.prtbox {
padding-bottom: 30px;
width: 33%;
display: inline-block;
}
.partnerdesc {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>
<div class="prtbox">
<img src="https://dummyimage.com/100X100/000/fff" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</div>
</div>
<div class="prtbox">
<img src="https://dummyimage.com/100X100/000/fff" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</div>
</div>
<div class="prtbox">
<img src="https://dummyimage.com/100X100/000/fff" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</div>
</div>
</body>
<script>
var coll = document.getElementsByClassName("partnerimg");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function () {
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = this.scrollHeight + "px";
}
});
}
Is there a way, with JavaScript, to find out the rendered width of the (incomplete) last line of text in a container (e.g. in a div)?
For example, suppose I have the following HTML:
<div style="display: table-cell; text-align: justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
If the div is not wide enough, the browser will break the text into multiple lines, possibly like this:
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
How can I find out the rendered width, in pixels, of the last line ("dolore magna aliqua.") from JavaScript?
Here, this could be helpfull, this is what you want ha?
Check live in jsfiddle
$(".borded-textbox").each(function(index, elem) {
$(elem).append('<span class="endline"></span>')
var endline = $(elem).find(".endline");
//var sizeOfDiv = $(".borded-textbox").width();
var sizeOfLeftSpace = parseInt(endline.offset().left);
endline.css('width', parseInt(endline.offset().left));
endline.addClass('processed');
$(".length").append(sizeOfLeftSpace);
});
An implementation of aladin8848's ingenious idea in pure JavaScript, MWE.
<html>
<head>
<meta charset="utf-8"/>
<script>
function lastLineLength() {
var thisDiv = document.querySelectorAll('#this')[0];
var tmpSpan = document.createElement( 'span' );
thisDiv.appendChild( tmpSpan );
var x = tmpSpan.offsetLeft;
thisDiv.removeChild( tmpSpan );
thisDiv.appendChild( document.createTextNode( x ) );
}
</script>
</head>
<body onload="lastLineLength()">
<div id="this" style="display: table-cell; position: relative">
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</div>
</body>
</html>