get number of lines of a paragraph having been appended - javascript

When executing the code below(on jsfiddle) for the first time, it alerts 2,2,3,2,5,9 in a sequential order.
however, executions after the first one always shows 2,2,3,2,6,9. (5 -> 6)
The right value is 6, as seen from a fifth paragraph in a red div on jsfiddle.
(this happens on chrome / safari on mac)
I assume the problem is it's not waiting for the construction of DOM of the appended element.
Any help is appreciated.
$(function(){
let eachPara = $("div:eq(0)").html().split("</p>");
let lineHeight = 18;
$("div:eq(0) p").each(function(i, val) {
$("#parent").append($(this).clone());
let eachRowN = $("#parent p:eq(-1)").height() / lineHeight;
alert(eachRowN);
});
});
complete code:
https://jsfiddle.net/fptd4xkh/1/
$(function() {
let eachPara = $("div:eq(0)").html().split("</p>");
let lineHeight = 18;
$("div:eq(0) p").each(function(i, val) {
$("#parent").append($(this).clone());
let eachRowN = $("#parent p:eq(-1)").height() / lineHeight;
console.log(Math.round(eachRowN));
});
});
#parent {
width: 430px;
background-color: red;
}
#parent p {
width: 100%;
line-height: 18px;
font-size: 17px;
hyphens: auto;
text-indent: 1em;
text-align: justify;
/* 両端揃え(均等割り付け) */
font-family: "Vesper Libre", serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<p>"Christmas won't be Christmas without any presents," grumbled Jo, lying on the rug.</p>
<p>"It's so dreadful to be poor!" sighed Meg, looking down at her old dress.</p>
<p>"I don't think it's fair for some girls to have plenty of pretty things, and other girls nothing at all," added little Amy, with an injured sniff.</p>
<p>"We've got Father and Mother, and each other," said Beth contentedly from her corner.</p>
<p>The four young faces on which the firelight shone brightened at the cheerful words, but darkened again as Jo said sadly, "We haven't got Father, and shall not have him for a long time." She didn't say "perhaps never," but each silently added it, thinking
of Father far away, where the fighting was.</p>
<p>Nobody spoke for a minute; then Meg said in an altered tone, "You know the reason Mother proposed not having any presents this Christmas was because it is going to be a hard winter for everyone; and she thinks we ought not to spend money for pleasure,
when our men are suffering so in the army. We can't do much, but we can make our little sacrifices, and ought to do it gladly. But I am afraid I don't," and Meg shook her head, as she thought regretfully of all the pretty things she wanted.</p>
</div>
<div id="parent"></div>

The spot from where you calculate doesn't have the correct font-face. Try the following.
Change:
#parent {
width: 430px;
background-color: red;
}
#parent p {
width: 100%;
line-height: 18px;
font-size: 17px;
hyphens: auto;
text-indent: 1em;
text-align: justify;
font-family: "Vesper Libre", serif;
}
Into:
div {
font-family: "Vesper Libre", serif;
}
#parent {
width: 430px;
background-color: red;
}
#parent p {
width: 100%;
line-height: 18px;
font-size: 17px;
hyphens: auto;
text-indent: 1em;
text-align: justify;
}

Related

How to create a read more link with fade out background?

I am following this tutorial and I tried to apply it to my case:
HTML
<div class="jiku_text">
<p>I was born in Mauritius in 1967, spending my childhood under the sun of the Indian Ocean, before moving to the UK in July 1976. Punk had just started its own cultural revolution, while reggae and dub were ever present in the neighbourhood “blues” parties, as well as from the first real booming systems in the cars that would ever so often drive casually through the streets of Lewisham, South-East London. I did all of my schooling there, drawing since as far back as I can remember, spending my youth deep into comics, sci-fi and fantasy literature, as well as role-playing games such as “Dungeons & Dragons”.</p>
<p>I can’t forget to mention what effect the release of Star Wars, in 1977, had on my vision of the world around me. Before even getting into J.R.R. Tolkien, this movie was definitely a milestone in my childhood, and stoked a fire for science-fiction and fantasy which would have me look at the world around me in a totally different way from before.</p>
<p>All these influences, as well as the music coming from the radio, the TV and the street, were reflected in what I drew or painted; from comic strip characters to lead figurines, even to the odd oil portrait or landscape painting.</p>
<p>After my school exams in summer ‘84, I started hanging out in Covent Garden, the hub of the London Hip Hop scene, which I had discovered the year before, walking through it with my mother and the younger of my older brothers. My drawing ability led me to pick up the marker and spray-can, doing anything from painting banners for the “Alternative Arts” centre, or customizing the trousers or jackets of some of the other people hanging out with me, whether they were dancers or Mc’s. I was soon trying to make a name for myself, along with my partner Scribla, then with Zaki Dee, Eskimo, and Xerox as The Trailblazers, and eventually as part of a crew called The Chrome , which I formed in the spring of 1985, around the time of a seminal gig called The Rapattack, at the Shaw Theatre in the Euston area of London.</p>
<p class="read-more">Read More</p>
</div>
CSS
.jiku_text {
padding-top: 80px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 60px;
background: #3a3a3a;
margin-top: 40px;
margin-bottom: 40px;
margin-right: 20px;
margin-left: 20px;
color: #fff;
max-height: 200px;
position: relative;
overflow: hidden;
}
.jiku_text .read-more {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
margin: 0; padding: 30px 0;
background-image: linear-gradient(to bottom, transparent, black);
}
JS
var $el, $ps, $up, totalHeight;
$(".jiku_text .btn").on("click", function() {
totalHeight = 0
$el = $(this);
$p = $el.parent();
$up = $p.parent();
$ps = $up.find("p:not('.read-more')");
// measure how tall inside should be by adding together heights of all inside paragraphs (except read-more paragraph)
$ps.each(function() {
totalHeight += $(this).outerHeight();
});
$up
.css({
// Set height to prevent instant jumpdown when max height is removed
"height": $up.height(),
"max-height": 9999
})
.animate({
"height": totalHeight
});
// fade out read-more
$p.fadeOut();
// prevent jump-down
return false;
});
But the expansion creates a jump, see the test case on jsFiddle
UPDATE
tried to provide outerHeight instead of "height": $up.height(), but the text isn't expanding in full see https://jsfiddle.net/fbh0o67o/351/
You have an issue with your container div. Remove paddings from you css 'jiku_text'.
.jiku_text {
/*
padding-top: 80px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 60px;
*/
background: #3a3a3a;
margin-top: 40px;
margin-bottom: 40px;
margin-right: 20px;
margin-left: 20px;
color: #fff;
max-height: 200px;
position: relative;
overflow: hidden;
}
Thanks to an answer in regards of my padding given to .jiku_text, I noticed where the issue was:
In my JS, I had to change "height": $up.height(), to "height": $up.outerHeight(), and then give "height": totalHeight + 140 which is the new calculated height with the padding in my css
https://jsfiddle.net/fbh0o67o/365/

Animating large text across screen

Currently, I have large text going across the screen like this:
var bkgrndString = "This is a string";
var r = 1;
playBackground();
function playBackground() {
document.getElementsByClassName("bkgrnd")[0].innerHTML = bkgrndString.substring(0, r);
setTimeout(function() {
r++;
if (r <= bkgrndString.length) {
playBackground();
}
}, 800);
};
.bkgrnd {
position: absolute;
font-family: 'Georgia';
white-space: nowrap;
font-size: 10em;
width: 1280px;
overflow: hidden;
line-height: 1.1em;
direction: rtl;
}
<p class="bkgrnd"><p>
How can I add in animations so that the chunk of large text glides smoothly across the screen?
I've tried using keyframes so that the entire string exists at once (rather than being typed out over time), but I'm unsure how to create the desired effect.
Thank you so much!

How to get rid of � in the share box of Twitter

I received some help and figured out how to put the clickable and shareable Twitter button in my Javascript.
However, now when it links the generated quote, in the places where I had unicode escaped characters I get �.
The quotations and hyphen do not appear. How can I fix this?
Below is my Javascript code.
var currentQuote = '';
var quotes = [
'\u201CMeditation is to be aware of every thought and of every feeling, never to say it is right or wrong, but just to watch it and move with it. In that watching, you begin to understand the whole movement of thought and feeling. And out of this awareness comes silence\u201D. - Jiddu Krishnamurti',
'\u201CHave you not noticed that love is silence? It may be while holding the hand of another, or looking lovingly at a child, or taking in the beauty of an evening. Love has no past or future, and so it is with this extraordinary state of silence.\u201D - Jiddu Krishnamurti',
'\u201CA quiet mind is all you need. All else will happen rightly, once your mind is quiet. As the sun on rising makes the world active, so does self-awareness affect changes in the mind. In the light of calm and steady self-awareness, inner energies wake up and work miracles without any effort on your part.\u201D - Nisargadatta Maharaj',
'\u201CLet silence take you to the core of life.\u201D \u2013 Rumi',
'\u201CSilence is a true friend who never betrays.\u201D \u2013 Confucius',
'\u201CYou throw thorns, falling in my silence they become flowers.\u201D \u2013 Gautama Buddha',
'\u201CSilence is an empty space, space is the home of the awakened mind.\u201D \u2013 Gautama Buddha',
'\u201CCare about what other people think and you will always be their prisoner.\u201D \u2013 Laozi',
'\u201CNot thinking about anything is Zen. Once you know this, walking, sitting, or lying down, everything you do is Zen.\u201D \u2013 Bodhidharma',
'\u201CIf you use your mind to study reality, you won\u2019t understand either your mind or reality. If you study reality without using your mind, you\u2019ll understand both.\u201D \u2013 Bodhidharma',
'\u201CThe ultimate Truth is beyond words. Doctrines are words. They\u2019re not the way.\u201D \u2013 Bodhidharma',
'\u201CWhen we\u2019re deluded there\u2019s a world to escape. When we\u2019re aware, there\u2019s nothing to escape.\u201D \u2013 Bodhidharma',
'\u201CTrying to find buddha or enlightenment is like trying to grab space.\u201D \u2013 Bodhidharma',
'\u201CBe empty of worrying. Think of who created thought. Why do you stay in prison when the door is wide open? Move outside the tangle of fear-thinking. Live in silence. Flow down and down in always widening rings of being.\u201D \u2013 Unknown',
'\u201CBeyond The Witness, there is the Infinite Intensity of Emptiness and Silence.\u201D \u2013 Sri Nisargadatta Maharaj'
];
function newQuote() {
var randomNumber = Math.floor(Math.random() * (quotes.length));
document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
}
function tweet() {
var quote = document.getElementById('quoteDisplay').innerHTML // Replace this with appopriate quote that you wanted.
var text = quote;
var tweet_url = "https://twitter.com/intent/tweet?text=" + text;
window.open(tweet_url);
};
document.getElementById("tweetButton").addEventListener("click", tweet);
This is what shows up
It originally had this,
var text = escape(quote);
But would not show anything, so I put
var text = quote;
However, now I get the �.
Here is the simple method that you can use to tweet the things via your twitter button.
function tweet() {
var quote = document.getElementById('quoteDisplay').innerHTML // Replace this with appopriate quote that you wanted.
var text = escape(quote);
var tweet_url = "https://twitter.com/intent/tweet?text=" + text;
window.open(tweet_url);
};
document.getElementById("tweetButton").addEventListener("click", tweet);
You can specify the function in onclick to call the function like a link
var currentQuote = '';
var quotes = [
'\u201CMeditation is to be aware of every thought and of every feeling, never to say it is right or wrong, but just to watch it and move with it. In that watching, you begin to understand the whole movement of thought and feeling. And out of this awareness comes silence\u201D. - Jiddu Krishnamurti',
'\u201CHave you not noticed that love is silence? It may be while holding the hand of another, or looking lovingly at a child, or taking in the beauty of an evening. Love has no past or future, and so it is with this extraordinary state of silence.\u201D - Jiddu Krishnamurti',
'\u201CA quiet mind is all you need. All else will happen rightly, once your mind is quiet. As the sun on rising makes the world active, so does self-awareness affect changes in the mind. In the light of calm and steady self-awareness, inner energies wake up and work miracles without any effort on your part.\u201D - Nisargadatta Maharaj',
'\u201CLet silence take you to the core of life.\u201D \u2013 Rumi',
'\u201CSilence is a true friend who never betrays.\u201D \u2013 Confucius',
'\u201CYou throw thorns, falling in my silence they become flowers.\u201D \u2013 Gautama Buddha',
'\u201CSilence is an empty space, space is the home of the awakened mind.\u201D \u2013 Gautama Buddha',
'\u201CCare about what other people think and you will always be their prisoner.\u201D \u2013 Laozi',
'\u201CNot thinking about anything is Zen. Once you know this, walking, sitting, or lying down, everything you do is Zen.\u201D \u2013 Bodhidharma',
'\u201CIf you use your mind to study reality, you won\u2019t understand either your mind or reality. If you study reality without using your mind, you\u2019ll understand both.\u201D \u2013 Bodhidharma',
'\u201CThe ultimate Truth is beyond words. Doctrines are words. They\u2019re not the way.\u201D \u2013 Bodhidharma',
'\u201CWhen we\u2019re deluded there\u2019s a world to escape. When we\u2019re aware, there\u2019s nothing to escape.\u201D \u2013 Bodhidharma',
'\u201CTrying to find buddha or enlightenment is like trying to grab space.\u201D \u2013 Bodhidharma',
'\u201CBe empty of worrying. Think of who created thought. Why do you stay in prison when the door is wide open? Move outside the tangle of fear-thinking. Live in silence. Flow down and down in always widening rings of being.\u201D \u2013 Unknown',
'\u201CBeyond The Witness, there is the Infinite Intensity of Emptiness and Silence.\u201D \u2013 Sri Nisargadatta Maharaj'
];
function newQuote() {
var randomNumber = Math.floor(Math.random() * (quotes.length));
document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
}
function newFunction() {
alert("Javascript Link");
}
body {
font-family: 'PT Serif', sans-serif;
margin: 0;
<!-- the above allows use of older browsers #D13053 -->
}
h1 {
color: white;
font-size: 45px;
<!-- margin-top: 100px;
-->font-weight: normal;
margin-bottom: 0;
}
h2 {
color: white;
font-size: 25px;
margin-top: 0;
}
.bio {
color: white;
font-size: 14px;
}
.me {
height: 165px;
border-radius: 110%;
border-style: solid;
border-color: white;
margin-top: 40px;
}
.about {
width: 400px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.grey {
height: 3px;
background-color: white;
border: none;
width: 50px;
}
.about-container {
background: url('inc.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 2000px;
}
h3 {
text-align: center;
font-size: 28px;
font-weight: normal;
margin-top: 100px;
color: white;
}
h4 {
text-align: center;
font-size: 24px;
}
button {
border-radius: 20px;
background-color: #ffffff;
font-size: 30px;
font-family: PT Serif, cursive;
padding: 0 20px;
border: none;
border-bottom: black solid 3px;
margin-top: 85px;
vertical-align: bottom;
}
.tweet-button {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 30px;
transition: all 0.5s;
cursor: pointer;
height: 80px;
}
.tweet-button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.tweet-button:active {
transform: translateY(5px);
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=PT+Serif:400,400i,700,700i" rel="stylesheet">
<title>Your Core</title>
</head>
<body>
<iframe style="display: none;" width="560" height="315" src="https://www.youtube.com/embed/H2JtoG97zhI?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
<div class="about-container">
<div class="about">
<img src="fib2.jpg" class="me" />
<h1> Find the space, </h1>
<h2>the space which is between thoughts...</h2>
<hr class="grey" />
<button onclick="newQuote()">Breathe and press here
</button>
<h3>
<div id="quoteDisplay">
<!-- quotes here -->
</div>
</h3>
<img id="tweetButton" class="tweet-button" src="http://orig01.deviantart.net/dac8/f/2013/023/b/c/twitter_button___logo_by_pixxiepaynee-d5sfq9u.png" onclick="newFunction();">
<script src="javascript.js"></script>
</body>
</html>

How to get the height of a div container through jQuery?

I am developing a webpage for authors section for a book publishing website and working on the show more/ show less button. There are two media div's, one for the author image(on the left side) and his summary(on the right side). I want to enable/disable the show more/ show less button based on the height of the summary content. I want to enable the show more/less button only when the height of the summary content is more than that of the fixed height image (180px).
Referred from : http://jsfiddle.net/thebabydino/U7Cyk/
NOTE : media, media-left and media-body are bootstrap classes.
HTML Code :
<div id = "author-page">
<div>
<h3>
Chetan Bhagat
</h3>
</div>
<div class="media">
<div class="media-left">
<img class="media-object" src="http://img01.ibnlive.in/ibnlive/uploads/2014/10/chetan_bhagat_151110.jpg"/>
</div>
<div class = "media-body">
<div class="info-wrapper">
(more)
(less)
<div class="info">
Chetan Bhagat is the author of six blockbuster books. These include five novels—Five Point Someone (2004), One Night # the Call Center (2005), The 3 Mistakes of My Life (2008), 2 States (2009),
Revolution 2020 (2011), the non-fiction title What Young India Wants (2012) and Half Girlfriend (2014). Chetan’s books have remained bestsellers since their release.
Four out his five novels have been already adapted into successful Bollywood films and the others are in process of being adapted as well. The New York Times called him the ‘the biggest selling English language novelist in India’s history’. Time magazine named him amongst the ‘100 most influential people in the world’ and Fast Company, USA, listed him as one of the world’s ‘100 most creative people in business’. Chetan writes columns for leading English and Hindi newspapers, focusing on youth and national development issues. He is also a motivational speaker and screenplay writer. Chetan quit his international investment banking career in 2009 to devote his entire time to writing and make change happen in the country. He lives in Mumbai with his wife, Anusha, an ex-classmate from IIM-A, and his twin boys, Shyam and Ishaan. You can email him at info#chetanbhagat.com or fill in the Guestbook with your feedback. You can also follow him on twitter (#chetan_bhagat) or like his Facebook fanpage (https://www.facebook.com/chetanbhagat.fanpage).
</div>
</div>
</div>
</div>
</div>
CSS :
.info-wrapper {
height: auto;
position: relative;
width: auto;
padding: 0 0 2.5em 0;
}
.info {
max-height: 180px;
height: auto;
width: auto;
overflow: scroll;
position: relative;
}
.info:after, .aftershadow {
bottom: 0;
width: auto;
height: auto;
}
.info-wrapper a {
left: 50%;
bottom: 1.5em;
height: 1.25em;
margin: -.1em 0 .35em -4.5em;
position: absolute;
font: 700 .67em/1.25em Arial;
text-align: center;
text-decoration: underline;
cursor: pointer;
}
.info-wrapper a:focus { outline: none; }
.info-wrapper .less { display: none; }
.info-wrapper .more:focus ~ .info,
.info-wrapper .more:active ~ .info {
max-height: none;
}
.info-wrapper .more:focus {
display: none;
}
.info-wrapper .more:focus + .less {
display: block;
}
If i understood your question properly,you can use jquery height functionality
$('window').height(); //gives height of browser viewport
Note that .height() will always return the content height, regardless of the value of the CSS box-sizing property
http://api.jquery.com/height
Put overflow hidden and programmatically identify
if the scrollHeight is higher than the the height of the div then make the "more" visible
var outerHeight = $(".info").outerHeight();
if($(".info")[0].scrollHeight > $(".info").height()) {
$("a.more").show();
}
$("a.more").click(function(e){
e.preventDefault();
$(".info").css({"overflow": "visible"});
$(".info").css({"max-height": "inherit"});
$("a.less").show();
$("a.more").hide();
return false;
});
$("a.less").click(function(e){
e.preventDefault();
$(".info").css({"overflow": "hidden"});
$(".info").css({"max-height": outerHeight + "px"});
$("a.more").show();
$("a.less").hide();
return false;
});
here outerHeight will reach your max-height when the content overflows
Therfore you can put #media queries for various screen size and use max-height accordingly
Check this http://jsfiddle.net/ZigmaEmpire/9dgs6432/11
I asked others also for this task and I got a solution. :-)
Thank you Nanang for answering the question. And here is exactly what I wanted,
http://jsfiddle.net/rraagghhu/9dgs6432/15/
HTML:
<div class = "container">
<div class="info-wrapper">
<div class="info">
Chetan Bhagat is the author of six blockbuster books.These include five novels—Five Point Someone (2004), One Night # the Call Center (2005), The 3 Mistakes of My Life (2008), 2 States (2009),
Revolution 2020 (2011), the non-fiction title What Young India Wants (2012) and Half Girlfriend (2014). Chetan’s books have remained bestsellers since their release.
Four out his five novels have been already adapted into successful Bollywood films and the others are in process of being adapted as well. The New York Times called him the ‘the biggest selling English language novelist in India’s history’. Time magazine named him amongst the ‘100 most influential people in the world’ and Fast Company, USA, listed him as one of the world’s ‘100 most creative people in business’. Chetan writes columns for leading English and Hindi newspapers, focusing on youth and national development issues. He is also a motivational speaker and screenplay writer. Chetan quit his international investment banking career in 2009 to devote his entire time to writing and make change happen in the country. He lives in Mumbai with his wife, Anusha, an ex-classmate from IIM-A, and his twin boys, Shyam and Ishaan. You can email him at info#chetanbhagat.com or fill in the Guestbook with your feedback. You can also follow him on twitter (#chetan_bhagat) or like his Facebook fanpage (https://www.facebook.com/chetanbhagat.fanpage).
</div>
(more)
(less)
</div>
<div class = "footer"> THIS IS FOOTER </div>
</div>
CSS:
.container{
background-color: yellow;
}
.footer{
background-color: yellow;
}
.info-wrapper {
height: auto;
position: relative;
width: auto;
padding: 0 0 2.5em 0;
background-color: red;
}
.info {
max-height: 180px;
height: auto;
width: auto;
overflow: hidden;
position: relative;
text-align: justify;
}
.info:after, .aftershadow {
bottom: 0;
width: auto;
height: auto;
}
.info-wrapper a {
left: 50%;
position: relative;
font: 700 .67em/1.25em Arial;
text-align: center;
text-decoration: underline;
cursor: pointer;
}
.less { height: auto; display: none; }
.more { display: none; }
jQuery:
if($(".info")[0].scrollHeight > $(".info").height()) {
$("a.more").show();
}
$("a.more").click(function(e){
e.preventDefault();
$(".info").css({"overflow": "visible", 'maxHeight': '100%'});
$("a.less").show();
$("a.more").hide();
return false;
});
$("a.less").click(function(e){
e.preventDefault();
$(".info").css({"overflow": "hidden", 'maxHeight': '180px'});
$("a.more").show();
$("a.less").hide();
return false;
});
$(window).resize(function() {
var hg = $('.info').height();
if (hg && hg >= 180) {
$('.info').css({ 'maxHeight': 180 });
$('a.more').show();
} else {
$('.info').css({ 'maxHeight': '100%' });
$('a.more').hide();
}
});
Now, expand and shrink the Result column in JSFiddle and see what happens. Happy playing. :-)
Remove max-height when show more is clicked
$(".more").click(function(){
$(".info").css("max-height","none");
$(this).hide();
$(".less").show();
});
$(".less").click(function(){
$(".info").css("max-height","120px");
$(this).hide();
$(".more").show();
});
http://jsfiddle.net/dggupta25/U7Cyk/150/

Making a single line of text into separate boxes using CSS

Is it possible to run a single line of text wrapped in a single tag, and then output it with a background colour, breaks into multiple lines encased in a box, and these boxes are translucent that overlapped each other?
I have a demo in JSFiddle >here<.
<div class="wrap">
<p><b>Live a good life. If there are gods and they are just,</b>
</p>
<p><b>then they will not care how devout you have been,</b>
</p>
<p><b>but will welcome you based on the virtues you have lived by.</b>
</p>
<p><b>~Marcus Aurelius</b>
</p>
</div>
That up there is what I wanted to accomplish in terms of looks, but it is not what I wanted to accomplish in terms of markup.
I needed partcularly this line to break into seperate boxes that overlap:
<blockquote class="blue-tape">Live a good life. If there are gods and they are just,
then they will not care how devout you have been,
but will welcome you based on the virtues you have lived by.
Now how do I split these into boxed lines? ~Marcus Aurelius</blockquote>
Is this still a CSS3 job, or do we need to use JQuery now?
(CSS for all of it)
.wrap {
width:100%;
text-align:center;
}
p {
display:block;
}
b {
display:inline-block;
background-color: rgba(78, 145, 220, 0.5);
color: #55349E;
font-weight:100;
padding:10px 1% 18px;
margin:-10px auto;
white-space:pre-wrap;
text-align:center;
}
.blue-tape {
text-align: center;
font-weight: 100;
font-size: 14px;
color: #fff;
display: block;
background-color: rgba(78, 145, 220, 0.5);
line-height: 1.6677547em;
width:80%;
margin: 0 auto;
white-space: pre-wrap;
}
You can use a span with a background color and extra line-height, to achieve the desired effect: (Fiddle)
CSS
span {
background-color: rgba(78, 145, 220, 0.5);
line-height:180%;
padding:.5em 0em;
}
HTML
<span>Live a good life. If there are gods and they are just, then they will not care how devout you have been, but will welcome you based on the virtues you have lived by. Now how do I split these into boxed lines?</span>
Becomes:

Categories

Resources