Blockquote element for centered text in books - html

Once in a while, a novel (book, story, short story, etc.) will have a block of centered text to display something external from the main subject, either a sign that is being read, an abstract text, etc.
Would it be proper (semantically correct) to use the blockquote element in these cases? For example:
section {
width: 350px;
font: 14px/1.3em Charter, sans-serif;
text-align: justify;
}
p {
margin: 0;
}
section>p+p {
text-indent: 1.5em;
}
blockquote {
text-align: center;
}
<section>
<p>I stepped back as far as I could and bent to peer under the door. There was nobody there; the stall must have been locked from the inside.</p>
<p>Cursing, I lowered my face and saw a piece of wet paper lying on the floor in front of the stall. It must’ve been glued to the door and fallen off. It informed:</p>
<blockquote>
<p>Closed for maintenance.</p>
<p>Sorry for any inconvenience.</p>
</blockquote>
<p>I fixed my eyes on the space between the floor and the door. It wasn’t so small, maybe […]</p>
</section>

Related

Space above DIV when appearing in text passages (tool tip)

I have an issue with white space appearing above div when inserted in between text. I have tried margin & padding things, but it hasn't worked out. I figure this must be a quite common issue, but I cannot seem to find an answer. Here's a jsfiddle.
div.appear {
background-color:rgba(29,29,29,0.9);
position: absolute;
display:none;
padding: 0 10px 10px 10px ;
z-index: 1000000;
color: white;
font-size:13px;
}
div.hover {
cursor:pointer;
color: #666;
display: inline-block;
}
div.hover:hover div.appear {
display:block;
}
<p>There is no exact definition on when a short story is too long, thus a<div class="hover">novella<div class="appear">A novella is a text that is longer than a short story, but not quite long enough to be a novel.</div></div> or a <div class="hover">novel<div class="appear">A novel is relatively long piece of fiction. What we often refer to as "a book".</div></div> on the other hand too short, becoming merely an <div class="hover">anecdote<div class="appear">an anecdote is a short tale</div></div>, to fit into the genre, but most short stories that we work with in the lessons are less than ten pages.
That's because you use incorrect HTML tags.
Don't use <div> inside <p>
<div> are, by default, display:block thus they will try to expand all the way across the view.
Instead of <div> for your words and tooltips, use <span> that don't modify the layout :
.appear {
background-color: rgba(29, 29, 29, 0.9);
position: absolute;
display: none;
padding: 0 10px 10px 10px;
z-index: 1000000;
color: white;
font-size: 13px;
}
.hover {
cursor: pointer;
color: #666;
display: inline-block;
}
.hover:hover .appear {
display: block;
}
<p>
There is no exact definition on when a short story is too long, thus a
<span class="hover">
novella
<span class="appear">A novella is a text that is longer than a short story, but not quite long enough to be a novel.</span>
</span>
or a
<span class="hover">
novel
<span class="appear">A novel is relatively long piece of fiction. What we often refer to as "a book".</span>
</span>
on the other hand too short, becoming merely an
<span class="hover">
anecdote
<span class="appear">an anecdote is a short tale</span>
</span>
, to fit into the genre, but most short stories that we work with in the lessons are less than ten pages.
</p>
You shouldn't put divs inside <p> tags. If you take a look at what you did with developer tools you will see that Chrome inserts a </p> tag after the word "thus", and that is where the padding/margin is coming from.
Just make all of your <div> tags <span> tags and that's it.
<p>There is no exact definition on when a short story is too long,
thus a<span class="hover">novella<span class="appear">A novella is a
text that is longer than a short story, but not quite long enough to be
a novel.</span></span> or a <span class="hover">novel<span
class="appear">A novel is relatively long piece of fiction. What we
often refer to as "a book".</span></span> on the other hand too short,
becoming merely an <span class="hover">anecdote<span class="appear">an
anecdote is a short tale</span></span>, to fit into the genre, but most
short stories that we work with in the lessons are less than ten pages.

HTML Float Property Side by Side

I am learning HTML and CSS and I produced this code regarding the float property.
body {
width: 750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
}
p {
width: 230px;
float: left;
margin: 5px;
padding: 5px;
background-color: #efefef;
}
<!DOCTYPE html>
<html>
<head>
<title>Using Float to Place Elements Side-by-Side</title>
</head>
<body>
<h1>The Evolution of the Bicycle</h1>
<p id="one">In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster.</p>
<p id="two">The device know as the Draisienne (or "hobby horse") was made of wood, and propelled by pushing your feed on the ground in a gliding movement.</p>
<p id="three">It was not seen a suitable for any place other than a well maintained pathway. </p>
<p id="four">In 1865, the velocipede (meaning "fast foot") attached pedals to the front wheel, but its wooden structure made it extremely uncomfortable. </p>
<p id="five">In 1870 the first all-metal machine appeared. The pedals were attached directly to the front wheel.
<p id="six">Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
</body>
</html>
Now, my question is this -
Why does the fourth paragraph id="four" come under the third paragraph id="three" rather than moving to the left hand edge?
float: left; will use every bit of free space available to make sure no space is wasted. You can see this in your example. The 3rd column has free space below, so the 4th column places itself there.
I think you're looking for display: inline-block; with a vetical-align: top; instead of a float: left; for a nice result. See the example below.
body {
width: 750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
}
p {
width: 230px;
margin: 5px;
padding: 5px;
background-color: #efefef;
display: inline-block;
vertical-align: top;
}
<!DOCTYPE html>
<html>
<head>
<title>Using Float to Place Elements Side-by-Side</title>
</head>
<body>
<h1>The Evolution of the Bicycle</h1>
<p id="one">In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster.</p>
<p id="two">The device know as the Draisienne (or "hobby horse") was made of wood, and propelled by pushing your feed on the ground in a gliding movement.</p>
<p id="three">It was not seen a suitable for any place other than a well maintained pathway. </p>
<p id="four">In 1865, the velocipede (meaning "fast foot") attached pedals to the front wheel, but its wooden structure made it extremely uncomfortable. </p>
<p id="five">In 1870 the first all-metal machine appeared. The pedals were attached directly to the front wheel.
<p id="six">Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
</body>
</html>
It's because you don't have the clear property specified. From MDN:
The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.
body {
width: 750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
}
p {
width: 230px;
float: left;
margin: 5px;
padding: 5px;
background-color: #efefef;
}
#four {
clear: left;
}
<!DOCTYPE html>
<html>
<head>
<title>Using Float to Place Elements Side-by-Side</title>
</head>
<body>
<h1>The Evolution of the Bicycle</h1>
<p id="one">In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster.</p>
<p id="two">The device know as the Draisienne (or "hobby horse") was made of wood, and propelled by pushing your feed on the ground in a gliding movement.</p>
<p id="three">It was not seen a suitable for any place other than a well maintained pathway. </p>
<p id="four">In 1865, the velocipede (meaning "fast foot") attached pedals to the front wheel, but its wooden structure made it extremely uncomfortable. </p>
<p id="five">In 1870 the first all-metal machine appeared. The pedals were attached directly to the front wheel.
<p id="six">Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
</body>
</html>

Wrapping Text Around Images (Responsive)

Good Evening,
I have tried and tried to position my text to the right of an image and when the browser is smaller then drops down underneath the image.
Can somebody tell me what I am doing wrong or not doing.
#bandmemberinfo-container {
width: 100%;
background-color: black;
height: auto;
margin-top: 10px;
border: 1px red solid;
color: #fff;
font-family: Arial;
font-size: 10px;
text-transform: uppercase;
}
.bandmemberinfo-container img {
height: 100%;
max-width: 350px;
float: left;
}
<div id="bandmemberinfo-container">
<!-- BAND MEMBER INFO CONTAINER START -->
<img src="http://slade40years.page4.com/nobby_439_752.jpg" class="img-responsive nobbyboulder" />
<p>THE 1970'S HOSTED ONE OF THE MOST FLAMBOYANT DECADES IN THE HISTORY OF POP MUSIC AND ARTISTS SUCH AS SWEET, DAVID BOWIE, WIZZARD, T-REX AND MUD CHAMPIONED THE "GLAM ROCK" MOVEMENT, WHERE PLATFORM BOOTS, SEQUINNED SHIRTS, TWO-TONE FLARED TROUSERS AND
OUTRAGEOUS MAKE-UP, BECAME THE NORM FOR MANY POP BANDS. THE MIGHTY SLADE LED THE GLAM MARCH ACROSS THE UK, INTO EUROPE AND THROUGHOUT THE WORLD. IT IS A PART OF POP HISTORY THAT HAS SHAPED MUSIC CULTURE MANY YEARS LATER AND SLYDE CONTINUE TO KEEP
THE EXCITING ATMOSPHERE OF GLAMROCK ALIVE. THEY ARE THE PERFECT CHOICE FOR ANY 70'S THEMED EVENT WITH AN IMPRESSIVE STAGE SHOW DURING WHICH THEY COVER MANY OF THE CLASSIC HITS OF THAT ERA SLYDE HAVE SUPPORTED ARTISTS SUCH AS THE RUBETTES, BAY CITY
ROLLERS, SMOKIE, BONEY M AND THE LATE ALVIN STARDUST. THEY ARE THE LONGEST RUNNING TRIBUTE TO THE MUSIC OF SLADE AND HAVE PERFORMED WITH THEM AT 70'S WEEKENDERS, UNDER THE NAME OF GLAMROCK UK.</p>
<!-- BAND MEMBER INFO CONTAINER END-->
</div>
You are using a class selector that is not in your HTML
Use:
#bandmemberinfo-container img {
height: 100%;
max-width: 350px;
float: left;
}
or add "bandmemberinfo-container" class not id (http://www.w3schools.com/css/css_syntax.asp ;)
You have two little mistakes:
1.) The selector for the image has to be #bandmemberinfo-container img instead of .bandmemberinfo-container img
2.) Its CSS settings should be like this:
#bandmemberinfo-container img {
width: 100%;
max-width: 350px;
float: left;
}
I.e. 100% width not height) for small screens (below 350px wide), but with a maximum of 350px - then the text will float right of it on larger screens (above 350px).
#bandmemberinfo-container {
width: 100%;
background-color: black;
height: auto;
margin-top: 10px;
border: 1px red solid;
color: #fff;
font-family: Arial;
font-size: 10px;
text-transform: uppercase;
}
#bandmemberinfo-container img {
width: 100%;
max-width: 350px;
float: left;
}
<div id="bandmemberinfo-container">
<!-- BAND MEMBER INFO CONTAINER START -->
<img src="http://slade40years.page4.com/nobby_439_752.jpg" class="img-responsive nobbyboulder" />
<p>THE 1970'S HOSTED ONE OF THE MOST FLAMBOYANT DECADES IN THE HISTORY OF POP MUSIC AND ARTISTS SUCH AS SWEET, DAVID BOWIE, WIZZARD, T-REX AND MUD CHAMPIONED THE "GLAM ROCK" MOVEMENT, WHERE PLATFORM BOOTS, SEQUINNED SHIRTS, TWO-TONE FLARED TROUSERS AND
OUTRAGEOUS MAKE-UP, BECAME THE NORM FOR MANY POP BANDS. THE MIGHTY SLADE LED THE GLAM MARCH ACROSS THE UK, INTO EUROPE AND THROUGHOUT THE WORLD. IT IS A PART OF POP HISTORY THAT HAS SHAPED MUSIC CULTURE MANY YEARS LATER AND SLYDE CONTINUE TO KEEP
THE EXCITING ATMOSPHERE OF GLAMROCK ALIVE. THEY ARE THE PERFECT CHOICE FOR ANY 70'S THEMED EVENT WITH AN IMPRESSIVE STAGE SHOW DURING WHICH THEY COVER MANY OF THE CLASSIC HITS OF THAT ERA SLYDE HAVE SUPPORTED ARTISTS SUCH AS THE RUBETTES, BAY CITY
ROLLERS, SMOKIE, BONEY M AND THE LATE ALVIN STARDUST. THEY ARE THE LONGEST RUNNING TRIBUTE TO THE MUSIC OF SLADE AND HAVE PERFORMED WITH THEM AT 70'S WEEKENDERS, UNDER THE NAME OF GLAMROCK UK.</p>
<!-- BAND MEMBER INFO CONTAINER END-->
</div>
I think for what your desired effect is. You can put the image inside the paragraph tag as the first item before the text starts, then the text will wrap around the image. You can then just add margin to the image to give it extra space between the image and text. And possibly use the image align-attribute
I have added another more heavy html element approach below, to show another method to control a layout. This is using floats and a more responsive approach.
I would also avoid using ID; use class as a rule of thumb. As it is just one less think to think about. And, if you don't care about legacy (IE) browsers then you could consider to use Flexbox. Which will help with different screens and wrapping of images.
.bandmemberinfo-container {
display: inline-flex;
width: 100%;
background-color: black;
height: auto;
margin-top: 1em;
border: 1px red solid;
color: #fff;
font-family: Arial;
font-size: 0.9em;
text-transform: uppercase;
}
.img_wrap {
float: left;
width: 50%;
border: 1px yellow dashed;
}
.img_wrap img {
height: auto;
max-width: 100%;
}
.two {
float: left;
width: 50%;
}
<div class="bandmemberinfo-container">
<div class='img_wrap'><img src="http://slade40years.page4.com/nobby_439_752.jpg" /></div>
<div class='two'>THE 1970'S HOSTED ONE OF THE MOST FLAMBOYANT DECADES IN THE HISTORY OF POP MUSIC AND ARTISTS SUCH AS SWEET, DAVID BOWIE, WIZZARD, T-REX AND MUD CHAMPIONED THE "GLAM ROCK" MOVEMENT, WHERE PLATFORM BOOTS, SEQUINNED SHIRTS, TWO-TONE FLARED TROUSERS AND
OUTRAGEOUS MAKE-UP, BECAME THE NORM FOR MANY POP BANDS. THE MIGHTY SLADE LED THE GLAM MARCH ACROSS THE UK, INTO EUROPE AND THROUGHOUT THE WORLD. IT IS A PART OF POP HISTORY THAT HAS SHAPED MUSIC CULTURE MANY YEARS LATER AND SLYDE CONTINUE TO KEEP
THE EXCITING ATMOSPHERE OF GLAMROCK ALIVE. THEY ARE THE PERFECT CHOICE FOR ANY 70'S THEMED EVENT WITH AN IMPRESSIVE STAGE SHOW DURING WHICH THEY COVER MANY OF THE CLASSIC HITS OF THAT ERA SLYDE HAVE SUPPORTED ARTISTS SUCH AS THE RUBETTES, BAY CITY
ROLLERS, SMOKIE, BONEY M AND THE LATE ALVIN STARDUST. THEY ARE THE LONGEST RUNNING TRIBUTE TO THE MUSIC OF SLADE AND HAVE PERFORMED WITH THEM AT 70'S WEEKENDERS, UNDER THE NAME OF GLAMROCK UK.</p></div>
<!-- BAND MEMBER INFO CONTAINER END-->
</div>

Good ol' footer trouble

So my footer won't stay down. It just appears on the middle of my page. I bet you've seen this question a lot of times but I really need some help since I've read tons of threads and I've tried the general solution outlined here:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
I will link my code and hopefully you can notice why the solution doesn't work for me.
HTML:
<!DOCTYPE HTML>
<HTML>
<header>
<title>Heilsa</title>
<link type="text/css" href="stylesheet3.css" rel="stylesheet"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</header>
<body>
<div id="container">
<img id="bordi" src="taka2.png"/>
<div class="menu">
<ul>
<li>Heim</li>
<li>Hollt Mataræði</li>
<li>Reynslusögur</li>
</ul>
</div>
<div id="content">
<div id="block">
</div>
<div id="meginmal">
<h1>Fyrirsögn</h1>
<p>A wall of text is something that is frowned upon in most, actually virtually all Internet societies, including forums, chat boards, and Uncyclopedia. You should not make walls of text because it can get you banned anywhere unless it is a place that encourages walls of text. I highly doubt any place does support something so irritating and annoying, but anything can exist, but not really because unless you are in heaven then that can happen. But no one actually knows that was just a hypothesis, a lame one that is. Actually not really lame. You can create a wall of text supporting site, but you would be hated if you do that, so do not. But you can if you like, but I discourage that. Now on to the actual information of walls of texts. The wall of text was invented when the Internet was invented, but actually it was slow at that time. So whenever it became fast. But there would need to be some free or not free community for people, and that community would be able to have walls of text. But that community probably wouldn't have actually invented the wall of text. So basically, no one except God and Al Gore knows when or where or how the wall of text existed/was invented. Noobs probably invented, but probably not. Who knows. Walls of texts are usually filled with a lot of useless information and junk. Information and junk can be the same, but only if the information is junk or the junk is information. But who cares. The information/junk inside a wall of text are usually related to wherever the wall of text is located, but the best walls of text, which are actually the most irritating, most eye-bleeding ones, are completely random. Walls of text usually make the reader asplode or have their eyes bleed and fall out of their sockets. A number of people can stand it, but not read them. Actually some people can stand and read them. Those people do not have short attention spans. These are boring and patient people who have no life or have all the time in their hands, which are the same, but not really. The punishment of what making walls of text varies of the strictness of the community. But it doesn't really matter. Nobody cares. Walls of texts should be free of links, different font colors, strange characters, which are those other symbols used in society, and capital letters because it ruins the whole purpose of the infamy of walls of texts. It makes them look dumb and weird. Walls of texts are obviously free of huge spaces and outstanding things like capital letters. Of course, paragraphs should never be in a wall of text. Walls of text are known to create nausea, confusion, head explosion, and others. The others being something I can not think of either because I am lazy or if I do not feel like it or I can not actually think of anything. Like what the fuck? That was a rhetorical question right there. What the fuck? You are actually not requesting a satisfactory answer, you just say that because you try to be funny or you feel like it or if you are pissed off. You must get a proper bitch-slapping to stop making walls of text, but if you are weird then that doesn't apply to you. Walls of text are defeated by deleting them or splitting them into paragraphs. Or some other things that would work but will take hours to think of. People are considered a nuisance if they create walls of text. This might be the end. If you hope this is the end, I am not sure. But if I was not sure then I wouldn't be talking. I should know. Or should I? The best way to make a better and good wall of text is to copy and paste what you previously typed or write. Hey, that reminds me. Walls of text aren't always on the internet! They could be anywhere that is able to produce symbols. D'oh. A wall of text is something that is frowned upon in most, actually virtually all Internet societies, including forums, chat boards, and Uncyclopedia. You should not make walls of text because it can get you banned anywhere unless it is a place that encourages walls of text. I highly doubt any place does support something so irritating and annoying, but anything can exist, but not really because unless you are in heaven then that can happen. But no one actually knows that was just a hypothesis, a lame one that is. Actually not really lame. You can created a wall of text supporting site, but you would be hated if you do that, so do not. But you can if you like, but I discourage that. Now on to the actual information of walls of texts. The wall of text was invented when the Internet was invented, but actually it was slow at that time. So whenever it became fast. But there would need to be some free or not free community for people, and that community would be able to have walls of text. But that community probably wouldn't have actually invented the wall of text. So basically, no one except God and Al Gore knows when or where or how the wall of text existed/was invented. Noobs probably invented, but probably not. Who knows. Walls of texts are usually filled with a lot of useless information and junk. Information and junk can be the same, but only if the information is junk or the junk is information.
</p>
</div>
</div>
<div id="wrapper">
<img id="undir" src="undir.png"/>
</div>
</div>
</body>
</HTML>
CSS:
body, html {
margin: 0;
padding: 0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
.menu {
width:550px;
height:35px;
font-family:Trajan Pro;
font-size:18px;
text-align:center;
font-weight:bold;
text-shadow:3px 2px 3px #333333;
margin-left:1010px;
position:absolute;
top:150px;
}
.menu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
list-style-type: none;
}
.menu li {
display: inline;
padding: 20px;
}
.menu a {
text-decoration: none;
color:white;
}
.menu a:hover {
text-shadow: 8px 5px 8px #333333;
font-size:20px;
}
#content {
min-height:100%;
position: relative;
width: 800 px;
height: 800px;
margin-right:200px;
margin-left:200px;
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#block1 { /*IGNORE THIS. I AM SAVING IT FOR LATER*/
background: red;
filter:alpha(opacity=20); /* IE */
-moz-opacity:0.2; /* Mozilla */
opacity: 0.2; /* CSS3 */
position: absolute;
top: 0; left: 0;
height: 100%; width:100%;
border-radius: 20px;
margin:10px;
}
#meginmal {
padding: 20px 30px 20px 30px;
text-align: center;
font-size:20px;
border-right: solid;
border-left: solid;
font-family: Trajan Pro;
}
#bordi {
height:100%;
width: 100%;
margin: 0%;
padding: 10px;
}
#wrapper {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
From your code, you have footer as id wrapper
Change the position from absolute to fixed
#wrapper {
position: fixed;
}

How to add line breaks to justified text?

I have a block of text in paragraph element with the following css:
p {
text-align: justify;
text-align-last: left;
margin: 0;
padding: 0;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
Here is the text:
DRG is Boston-based organization dedicated to supporting the unique needs of the defense and intelligence community. Founded in 2011 on the belief that innovative, high-quality solutions could be delivered quickly and affordably. With over a decade of field experience DRG is uniquely positioned to help customers succeed in today’s operational and fiscal environment.
The result looks like this:
What I dislike is the spacing between 'today's operational and fiscal' line. I want to move the 'a' down a line and the 'help' down a line to spread out the word density.
The problem:
When add a <br /> before the word 'a' and the word 'help' I get the following:
Now the left edge of the text block is not flush.
The Question:
How can I force the words to be on the next lines without adjusting the size of the text block?
Browsers are crap at fine-tuned typography. Full justification makes text HARDER to read for users and, in general, should be avoided.
Different browsers and operating systems will render the text slightly differently and there is no guarantee that the text will wrap where you expect it anyway. You may end up fixing it for yourself and braking it elsewhere. Trying to micro-manage this is a fruitless exercise.
See: http://nedbatchelder.com/blog/200806/bad_web_typography_full_justify.html
I found a solution based on a comment by Jongware.
I used (word at end of one line)<nobr> (word at start of next line).
It stuck the two words together and both words were added to the second line, looks great.
A better solution would be to use multiple elements. Take the places you want line breaks and separate those sections into individual sections.
Once they are separate sections, they can be displayed in a column to look like they are all one element.
Text unaltered:
p {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
.text {
width: 400px;
text-align: justify;
text-align-last: left;
}
<p class="text">DRG is Boston-based organization dedicated to supporting the unique needs of the defense and intelligence community. Founded in 2011 on the belief that innovative, high-quality solutions could be delivered quickly and affordably. With over a decade of field experience DRG is uniquely positioned to help customers succeed in today’s operational and fiscal environment.</p>
Using line breaks:
p {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
.text {
width: 400px;
text-align: justify;
text-align-last: left;
}
<p class="text">DRG is Boston-based organization dedicated to supporting the unique needs of the defense and intelligence community. Founded in 2011 on the belief that innovative, high-quality solutions could be delivered quickly and affordably. With over <br/>a decade of field experience DRG is uniquely positioned to <br/>help customers succeed in today’s operational and fiscal environment.</p>
Using separate sections:
p {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
.text {
width: 400px;
text-align: justify;
text-align-last: justify; /* not really the last line */
}
/* The last line of the last p, should use left alignment */
.text.last {
text-align-last: left;
}
<p class="text">DRG is Boston-based organization dedicated to supporting the unique needs of the defense and intelligence community. Founded in 2011 on the belief that innovative, high-quality solutions could be delivered quickly and affordably. With over</p><p class="text">a decade of field experience DRG is uniquely positioned to </p><p class="text last">help customers succeed in today’s operational and fiscal environment.