Develop Reference

how to place the "read more" text next to the end of truncated line- Javascript [duplicate]

This question already has answers here:
Generating ellipsis AND "Read more" link with CSS
(3 answers)
Closed 2 years ago.
I have a text that I have truncated using the css - height and overflow property.
.container {
width: 600px;
border: 1px solid #888;
padding: 0.5em;
line-height: 1.2em;
margin-bottom: 10px;
}
.summary {
height: 47px;
/* adjust based on line-height * rows desired */
overflow: hidden;
}
.ellipsis {
height: 0;
}
.ellipsis span {
background: white;
padding-left: 0.5em;
position: relative;
top: -1.2em;
left: 3.2em;
color: blue;
}
<div class="container">
<div class="summary">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</p>
<ul>
<li>test</li>
<li>test333</li>
</ul>
<strong>testststststs</strong>
</div>
<div class="ellipsis"><span>... Read more</span></div>
</div>
however my issue is when I try placing the "...read more" using he position relative property it does not work: ex below:
http://jsfiddle.net/ctges45w/3/
As you can see the above fiddle the text is floating in middle of the sentence.
http://jsfiddle.net/ctges45w/5/
how can I make sure that the "read more" text always get placed at the end of the line where its truncated regardless of the width of the content?- something like this:
http://jsfiddle.net/ctges45w/4/
I have tried looking up at sources on stack overflow with similar issue and those havent or partially worked for me: ex here:how to place " ...view more " text next to the truncated sentence in a container-Javscript
any ideas?

Forget all the relative positioning. Just simply put the readmore at the end of the text and style it as you wish.
let summary = document.querySelector('.summary')
if (summary.textContent.length > 100){
let truncated = summary.textContent.substring(0, 100)
summary.innerHTML = `<p style="margin:0;">${truncated}<span class='ellipsis'>... Read more</span></p>`
}
.container {
width: 600px;
border: 1px solid #888;
padding: 0.5em;
line-height: 1.2em;
margin-bottom: 10px;
}
.summary{
overflow: hidden;
height: 47px;
padding: 0;
}
.ellipsis{
color: blue;
}
<div class="container">
<div class="summary">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</p>
<ul>
<li>test</li>
<li>test333</li>
</ul>
<p>
<strong>testststststs</strong>
<span class="ellipsis">... Read more</span>
</p>
</div>
</div>

Setting width of <div> to be one of two values based on text content

Is there any way to set width of a <div> using a conditional operator on the size of text within it?
For example, if there are 60 characters or less, width should be 500px else, 700px.
This works fine upto some extent:
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-container > div {
display:block;
min-width: 600px;
margin: 2px;
text-align: left;
}
<div class="flex-container">
<div>(A) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
</div>
<div>(B) Lorem ipsum dolor sit amet,</div>
<div>(C) Lorem ipsum dolor sit amet </div>
<div>(D) Lorem ipsum dolor sit amet </div>
</div>
Output:
But, when I increase the number of characters of the first child <div>, I get this:
I want all the container elements to shift down once an element crosses a specific character limit, say, 60 characters.
EDIT:
What I wanted is this:
(image)

You could more easily do this with CSS Grid than with flexbox layout; here we take advantage of the minmax() function to determine the column width (bearing in mind we're explicitly styling the whole column, not just the specific 'cell' of content):
grid-template-columns: repeat(2, minmax(min-content, 700px));
Here we use the repeat() function to create two columns, each column assigned a minimum width of 500px or a maximum width of 700px.
This gives the following output:
.flex-container {
display: grid;
grid-template-columns: repeat(2, minmax(500px, 700px));
grid-template-rows: repeat(2, 1fr);
}
.flex-container>div {
white-space: nowrap;
overflow: hidden;
}
<div class="flex-container">
<div>(A) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
</div>
<div>(B) Lorem ipsum dolor sit amet,</div>
<div>(C) Lorem ipsum dolor sit amet </div>
<div>(D) Lorem ipsum dolor sit amet </div>
</div>
References:
minmax().
repeat().
"Basic concepts of grid layout."

You can do this with jQuery. Run a loop and check all the element, and if one of the element has more than 60 character you apply a width to all of them.
var elem = $('.flex-container > div');
for (var i = 0; i < elem.length; i++) {
if (elem.eq(i).text().length > 60) {
elem.css('width', '600px');
break;
}
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-container>div {
display: block;
min-width: 300px;
margin: 2px;
text-align: left;
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-container">
<div>(A) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
</div>
<div>(B) Lorem ipsum dolor sit amet,</div>
<div>(C) Lorem ipsum dolor sit amet </div>
<div>(D) Lorem ips </div>
</div>

You can resolve this with JavaScript, using the string length property and a condition.
1) Create a variable in JavaScript to access the div you created using : document.getElementsByTagName("div").innerHTML;
2) Use the if. In the condition use the length property and a compactor to see if the length is bigger then a certain number of characters.
3) In the statements add document.getElementsByTagName("div").style.width = x; and modify the width by the number you want by changing x.
Using a conditional operator, you've set the size of a div depending on the size of text.

showing a div content after scrolling down

hi there i'm trying to show a hidden div when scrolling down from the top of the browser page, like the Accordion function. What i'm using here is this Code:
HTML:-
// Visible DIV
<div class="firstBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
// Hiddden DIV
<div class="textBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
// Visible DIV
<div class="secondBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
CSS:-
.textBlock {
text-align: center;
height: 104px;
width: 100%;
float: left;
display: none;
}
.textBlock p {
font-size: 16px;
font-family: arial,helvetica,sans-serif;
padding: 10% 5%;
line-height: 20px;
}
jQuery:-
$(document).ready(function(){
$(window).bind("scroll", function() {
if ($(this).scrollTop() > 600) {
$(".textBlock").fadeIn();
} else {
$(".textBlock").stop().fadeOut();
}
});
});
but it needs some modification in order to work like Accordion-Function.

If you want the accordion effect you should use the slideDown and slideUp functions (docs here), like so:
http://jsfiddle.net/b7yomjd0/3/

dynamically generated buttons with javascript

I am working on a TV application with JavaScript, Html and CSS.
I want to generate buttons where the label(title) is not always the same: sometimes so long or quiet short. The labels should be dynamically generated from xml files. So the problem is to display all the generated buttons with the same width.
Here is how I am creating the buttons with javascript:
var a = document.createElement("a");
var span2 = document.createElement("span");
span2.setAttribute("class", "span1");
span2.appendChild(document.createTextNode(text));
a.appendChild(span2);
How we can do it?

Here's an option:
When you get your set of button labels, get the length of each string.
Determine how wide the buttons need to be based on the number of characters in the longest string.
When you build each span2, give it a width attribute equal to that largest size.
However, be aware that if you have some very long labels and some very short, it may look weird having the really short labels on very wide buttons.

I don't know exactly what you are trying to do but here is one example how to make the buttons with same width and having different character length :)
var words = ['Lorem', 'Lorem ipsum', 'Lorem ipsum dolor', 'Lorem ipsum dolor sit', 'Lorem ipsum dolor sit amet', 'Lorem ipsum dolor sit amet consectetur', 'Lorem ipsum dolor sit amet consectetur adipisicing', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit fuga', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit fuga animi'];
for (var i = 0; i < 10; i++) {
var a = document.createElement("a");
var span2 = document.createElement("span");
span2.setAttribute("class", "span1");
span2.style.width = 150 + "px";
span2.appendChild(document.createTextNode(words[i]));
a.appendChild(span2);
document.body.appendChild(a);
}
.span1 {
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background: lightblue;
margin: 5px;
vertical-align: middle;
padding: 5px;
border-radius: 5px;
color: #fff;
}

Thanks a lot for your ideas and comments :)
I decided to make some thumbnails and I will query the buttons title :) At least I am sure now that I will get a list of buttons with fixed width.
Thanks a lot for your kind help :)

Setting height of surrounding DIV after inner DIV is expanded/collapsed

I have a simple accordion. What i am trying to do is that when an item within the content is clicked (How to reach us) for example, the hidden subsequent text is expanded. Once expanded, the new height of the content DIV is calculated. This newly calculated content DIV height is then assigned to the height of .wrapper. The red wrapper should then surround the entire box.
See fiddle: http://jsfiddle.net/oampz/jLQf4/1/
HTML:
<div class="wrapper">
<ul class="panel">
<li>
<div class="heading"> <a>Menu 1</a>
</div>
<div class="content">
<ul>
<h2>Top Ten Questions</h2>
<li>
How to reach us
<p class="hide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</li>
<li>
How to email us
<p class="hide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</li>
<li>
Contact Number
<p class="hide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</li>
</ul>
</div>
</li>
</ul>
</div>
CSS:
.heading {
color: white;
font-weight: bold;
padding: 15px 0 15px 20px;
background: grey;
}
.content {
background: #99CCFF;
position: absolute;
}
.hide {
display: none;
}
.wrapper {
background: #FFD1E0;
position: relative;
}
jQuery:
$(".content ul li a").click(function () {
var $this = $(this);
$this.next(".content ul li a").show(400);
$this.parent().siblings().children().next().hide();
return false;
});
UPDATE *******************************
After the .onClick, would something like:
$(".wrappper").css({'height':($(".content").height()+'px')});
Work?
UPDATE *******************************
Updated fiddle: http://jsfiddle.net/oampz/jLQf4/9/

If I understand your issue correctly, then this may help:
Demo Fiddle
Your content div doesn't have a specified width, so it's automatically wrapping whatever is inside of it, when you show your text it extends out further than it was initially.
EDIT - I think that there may be an easier way to go about what you're trying to accomplish. Instead of using JS to dynamically update the .wrapper I think it would be easier to remove the position: absolute from .content. Some padding seemed to make it look the same.
CSS:
.content {
width: 280px;
background: #99CCFF;
padding: 10px 0;
//position:absolute;
}