I've seen a property that allow you to fill the entire width of a container with text, ala magazine style. It simply increases the space between words to accommodate for the additional space.
What is this property?
You're thinking of text-align: justify.
div {
text-align: justify;
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec nisl ipsum, at ullamcorper justo. Vivamus ac dui lorem. Aliquam nec diam urna, in semper augue. Etiam commodo dui velit. Vestibulum in nibh nulla, a feugiat justo. Proin accumsan, tellus et condimentum laoreet, lacus lorem consequat nisi, ac fermentum velit eros at metus. Aliquam lacinia mollis felis, vel pretium nulla condimentum consectetur. Quisque in mattis nibh. Nunc adipiscing tincidunt elit, vitae pellentesque felis molestie ac. Fusce vestibulum dui in nibh gravida ut placerat ligula porta. Ut sem lectus, condimentum nec tincidunt a, imperdiet vitae risus.</div>
Related
I have text inside div.
What I want to do is make lines same width, so space automatically changes to align lines, like you can do in Word.
Can it be done with html and css?
You can try with text-align: justify;
Working copy is here:
p {
text-align: justify;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eros velit, dictum id libero quis, porttitor volutpat odio. In et lectus a ligula pulvinar egestas. Nullam ornare turpis ac dui efficitur commodo. Mauris laoreet cursus lorem, quis congue neque venenatis vel. Nullam eu maximus nulla, vitae fermentum nisl. Sed eu euismod elit, eget consequat lorem. Suspendisse eget interdum elit. Nullam convallis massa magna, quis scelerisque orci sollicitudin eget. Curabitur porta nibh nisl, at tempor leo vulputate quis. Nam eget nibh turpis. Suspendisse ac ex finibus, consectetur nunc ac, dapibus sapien. Curabitur eleifend ut mauris quis sodales. Aenean viverra ante non mauris egestas, sed pellentesque dolor tempus. Donec rhoncus quis magna posuere fermentum.swdjsdlkalksdnlds jdhjfhdskjnhckjdsnc
</p>
You can use:
div {
text-align: justify;
text-justify: inter-word;
}
More info here
I'm attempting to have text flow around images in the following fashion:
eg, images in two columns, with one image in the "center" column and a number of them in the right column. I tried "floating boxes" via display:inline-block; and I tried a table-like config using display:table/display:table-cell, but I was unable to provide the correct (changing) width for the text on the left.
(The apparent alignment of the 2nd parag of text with the bottom of the center image is not necessary.)
Appreciation for your assistance!
Here's a demo using float - does this accomplish what you want?
.column {
float: right;
}
.column img {
clear: both;
float: right;
margin: 5px;
}
<div class="column">
<img src="http://via.placeholder.com/100x100" />
<img src="http://via.placeholder.com/100x100" />
<img src="http://via.placeholder.com/100x100" />
</div>
<div class="column">
<img src="http://via.placeholder.com/200x200" />
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et velit laoreet, volutpat urna venenatis, porttitor ligula. Ut nulla ipsum, pulvinar et metus sed, luctus volutpat velit. Nam consectetur diam eget dui rutrum imperdiet. Sed ornare tempor
lorem. Cras sed neque fermentum, porttitor tortor eget, efficitur ligula. Maecenas laoreet dignissim arcu vitae semper. Suspendisse ac elementum ipsum, eu convallis urna. Etiam interdum, leo et molestie aliquam, turpis augue mattis neque, a pharetra
diam orci nec augue. Aliquam id nisl a massa rhoncus mollis. Suspendisse et ex sit amet mi consequat efficitur. Nulla at turpis nec ante eleifend consequat. Nulla in molestie magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et velit laoreet, volutpat urna venenatis, porttitor ligula. Ut nulla ipsum, pulvinar et metus sed, luctus volutpat velit. Nam consectetur diam eget dui rutrum imperdiet. Sed ornare tempor
lorem. Cras sed neque fermentum, porttitor tortor eget, efficitur ligula. Maecenas laoreet dignissim arcu vitae semper. Suspendisse ac elementum ipsum, eu convallis urna. Etiam interdum, leo et molestie aliquam, turpis augue mattis neque, a pharetra
diam orci nec augue. Aliquam id nisl a massa rhoncus mollis. Suspendisse et ex sit amet mi consequat efficitur. Nulla at turpis nec ante eleifend consequat. Nulla in molestie magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et velit laoreet, volutpat urna venenatis, porttitor ligula. Ut nulla ipsum, pulvinar et metus sed, luctus volutpat velit. Nam consectetur diam eget dui rutrum imperdiet. Sed ornare tempor
lorem. Cras sed neque fermentum, porttitor tortor eget, efficitur ligula. Maecenas laoreet dignissim arcu vitae semper. Suspendisse ac elementum ipsum, eu convallis urna. Etiam interdum, leo et molestie aliquam, turpis augue mattis neque, a pharetra
diam orci nec augue. Aliquam id nisl a massa rhoncus mollis. Suspendisse et ex sit amet mi consequat efficitur. Nulla at turpis nec ante eleifend consequat. Nulla in molestie magna.</p>
I need to make the text justified and the last line aligned to the right, here's what I've done:
CSS:
p{
text-align:justify;
direction:rtl;
}
HTML:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt gravida efficitur. Mauris auctor, lacus quis maximus viverra, arcu leo posuere magna, eget convallis lectus arcu vel diam. Nam sed diam eu ligula faucibus aliquam non eget tellus. Integer suscipit interdum enim, eu feugiat lectus cursus ac. Nunc ipsum lacus, rutrum eu neque in, ornare tristique nulla. Aenean convallis, metus non hendrerit convallis, magna tortor consequat velit, in laoreet tortor felis eu purus. Vestibulum venenatis, neque a hendrerit tristique, tellus urna convallis orci, ac sagittis magna nisl at est.</p>
<p>Duis dapibus lorem et tincidunt rutrum. Aliquam id ante venenatis massa egestas egestas. Quisque purus mauris, congue vitae nunc ac, vulputate vehicula massa. In in ullamcorper tortor, eu euismod felis. Donec suscipit pellentesque velit, in auctor mauris gravida id. Nunc at iaculis arcu. Etiam sed nibh eu urna auctor ullamcorper et non odio. Morbi vel augue id libero sollicitudin commodo at a ex. Proin fermentum augue at mattis consequat. Curabitur consectetur, nisi semper accumsan pellentesque, mi sapien maximus erat, eu venenatis dolor ipsum euismod nisi. Donec ut odio leo.</p>
JSFIDDLE:
https://jsfiddle.net/u1nbg939/1/
The problem is that it's messing up with the last line punctuation, it's going to the beginning of the line.
Any alternative (a cross browser one)?
I know float:left will allow text to flow around an image floated on the left.
And float:right will allow text to flow around an image floated on the right.
Is there a way to flow text around both a left and right image?
It's just as you said. You need to have one image with float:left and another with float:right. If both are placed before the text, they will each be at their respective top corners, horizontally aligned.
<img src="http://placehold.it/100x200" style="float:left;">
<img src="http://placehold.it/100x200" style="float:right;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra diam finibus arcu dictum, sed condimentum neque eleifend. Nullam non lobortis leo, a sollicitudin ipsum. Pellentesque gravida aliquet eros, in imperdiet eros dictum eu. Aenean vel pharetra libero. Nam vel risus sit amet tortor fermentum venenatis. Aenean efficitur, ante ac semper porta, turpis nunc dignissim risus, sed ullamcorper dolor lacus a felis. Sed vel nulla imperdiet, luctus tellus sed, pharetra sem. Nullam vehicula elit eget urna lobortis, at porta nunc tempor. In gravida aliquet rutrum. Cras at lacus ac felis egestas aliquet. Aenean viverra eu mauris a fermentum. Donec pharetra nisl ex, sit amet sodales orci lobortis id. Nullam lobortis dictum pharetra. Cras pellentesque rhoncus magna a ultricies. Quisque et vehicula risus, in porttitor ex. Quisque aliquet blandit velit ut gravida.
The structure of my image and paragraphs is as follows:
<p class="All-Book-Text">Maecenas iaculis, ipsum at tempor placerat, orci ligula aliquam enim, sit amet sagittis turpis enim sit amet lorem. Praesent dapibus pretium felis, et tempus nibh posuere a.</p>
<div class="_idGenObjectLayout-3">
<div id="_idContainer062" class="ObjExpOpt-Images">
<img class="_idGenObjectAttribute-1" src="image/animal.png" alt="" />
</div>
</div>
<p class="All-Book-Text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet elementum ex, a porttitor arcu vulputate vitae. Mauris ac finibus nisi. Etiam at tellus vitae quam pretium eleifend. Donec at dictum nisi, id condimentum dui. Donec in tortor ipsum. Etiam sit amet turpis vulputate, maximus erat in, lacinia leo. Cras placerat lobortis fermentum. Phasellus vulputate libero et pellentesque mattis. Aenean tristique ante egestas nibh aliquet, a sagittis sem aliquam. Aenean sit amet diam elementum, cursus arcu non, vehicula lorem. Sed vitae ante id augue consectetur euismod. Suspendisse ac metus ut tortor mollis semper eget eu mi. Vivamus eleifend leo at felis bibendum rutrum. Proin condimentum consectetur velit, at tristique elit accumsan vel.</p>
When the page renders, the text of the lower paragraph overlaps over the image. How can I prevent this and make sure that the distance between the image and the parapgraph is 5 px and no overlap occurs whatsoever. Thanks!
Here's a live demo with my problem http://jsfiddle.net/zvnjnxnf/
Everything looks ok here: JsFiddle
p {display: inline}
img {display: block}
first, you should remove all the style for All-Book-Text and _idGenObjectLayout-3
then add the following css :
._idGenObjectLayout-3{
padding : 5px;
}