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.
Related
How do i position a centered text or logo (picture 2) at the bottom of the viewport similar to a footer? When the dropdownmenue (picture 3) opens the logo or text should move accordingly to the new height.
So the div below point 5 should dynamically change its height or get out of site in case.
I tried several solutions i googled prior but somehow all did not work like i wanted it to be.
If you know the height of the footer, then you could use min-height, absolute positioning and padding-bottom. However I'm going to assume the more difficult case in which you don't know the height.
<style>
* {box-sizing:border-box;}
.wrapper {min-height:100vh;display:flex;flex-direction:column;}
.main {flex:1 0 auto;}
.footer {background-color:yellow;padding:16px;font-weight:bold;flex:0 0 auto;}
</style>
<div class="wrapper">
<div class="main">
<h1>
Main
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquet, nibh id placerat viverra, justo purus semper dolor, at lacinia eros mauris eu libero. In finibus a urna dapibus tempus. Aenean ipsum urna, tempor at lectus non, blandit feugiat quam. Donec sed ante orci. Integer laoreet est erat, a feugiat leo posuere sed. Mauris sit amet metus finibus, dapibus nunc ut, molestie erat. Nullam rhoncus sagittis lacus id finibus. Etiam sollicitudin nibh dui, a mollis nisl pharetra vitae. Suspendisse nec laoreet ipsum. Fusce sit amet tempor sem. Vestibulum consequat est in nisl aliquam ornare. Aliquam erat volutpat.
</p>
<p>
Sed vulputate nisl ac est eleifend bibendum. Nullam cursus at ex sit amet dignissim. Sed blandit pretium venenatis. Phasellus at ullamcorper nibh. Aenean nec lectus semper, efficitur diam in, luctus nisi. Phasellus in ligula congue, cursus nunc et, luctus mi. Suspendisse a leo luctus, molestie elit sed, venenatis sem. Nullam lobortis ante nec dictum elementum. Praesent aliquam orci quis molestie consectetur. Aliquam ornare a ipsum dapibus pulvinar. Morbi aliquet posuere ligula, vel volutpat dolor pellentesque vel. Vivamus non euismod leo. Duis feugiat velit a est tincidunt pulvinar. Proin blandit malesuada pulvinar. Nunc ut elementum ex, non vehicula tortor.
</p>
</div>
<div class="footer">
Footer
</div>
</div>
Change the height of your browser up and down to see how this works - the principle is a vertical flexbox that's at least the height of the screen, and a footer that's always at the bottom because the main content grows to fill any spare space.
I have a div that looks roughly like this
<div class="document-teaser" style="display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; text-overflow: ellipsis; -webkit-line-clamp: 7; width: 500px">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor sollicitudin magna, ut lacinia nulla accumsan non. Pellentesque nulla risus, pellentesque nec tincidunt nec, commodo quis orci. Suspendisse gravida massa felis. Proin ac nisl id ante vehicula mollis nec a felis. Mauris lobortis tincidunt libero scelerisque faucibus. Morbi tempor nunc a porta pellentesque. Fusce scelerisque diam ac dapibus tristique. Suspendisse finibus maximus nunc, at faucibus lorem commodo nec.</p>
<p>Duis nec nibh feugiat, interdum eros ut, consectetur eros. Praesent eu pretium lectus, eget ornare odio. Duis at sollicitudin augue, at fermentum nibh. Donec ante erat, tristique sed venenatis vitae, suscipit a urna. Maecenas in cursus ipsum, ac fermentum augue. Nulla pretium urna justo, vulputate posuere ante tempor vel. Vestibulum ut ligula congue, gravida ex eget, cursus est.</p>
<p>Donec sed mi faucibus ligula venenatis cursus. Fusce faucibus, arcu vitae sagittis aliquet, dui justo accumsan nisl, eget condimentum lacus velit mattis tellus. Donec sed consectetur urna. In malesuada volutpat augue, quis scelerisque tortor porta quis. Vivamus est metus, vehicula at ultricies ac, ornare vel mi. Donec vel vestibulum ligula. Vivamus sit amet purus odio. Nunc ullamcorper auctor sapien id pellentesque. Phasellus varius ultrices lacinia. Donec a sem ut lacus dignissim bibendum. Cras auctor.</p>
</div>
The styles are added by vue-line-clamp and it works fine on desktop with all viewports.
As soon as I go to my phone, it starts acting up.
The styles are still on the parent, but it is working as if it's applied to all the children. Thus, all p tags get line-clamp to 7, all of them get ellipsis and all have overflow hidden. First of all, this makes all 3 P tags show (which isn't the case on desktop) and it seems like the last two p tags are mushed together so their text is overlapping.
Is the whole webkit box/line-clamp just incompatible with mobile phones or do I need to change something?
For future reference, try also limiting the max-height, in your case for a 7 line clamp, max-height: 8.75 rem might do it, as it did for me. This will also make it work not only on Safari iOS, but also IE, as line-clamp is not supported on IE.
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)?
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;
}
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>