I've been practicing with columns lately and I just can't seem to get them right.
This is probably very simple to fix, but I'm pretty bad at web development at the moment. The highlighted section in the picture would obviously look better if it began at the top of the second column, how can I bump it over?
I never know exactly what code to post, so please tell me what you need to see and I'll edit it in as fast as I can.
Thank you for the help!
The break-inside: avoid-column on paragraphs should do the trick, but the browser support is not great. You can try also -webkit-column-break-inside:avoid and page-break-inside:avoid jsfiddle
Try this:
HTML:
<div class="test">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed turpis congue, dignissim nibh eu, ullamcorper neque. Etiam id mi cursus, pellentesque sapien at, volutpat ligula. Sed mattis dapibus dictum. Duis hendrerit ut est in rutrum. Suspendisse in nibh fringilla, congue erat non, euismod eros. Proin at elit ac dolor pharetra gravida quis in quam. Sed fringilla porta quam non tincidunt.
</p>
<p>
Phasellus eget purus et tellus lacinia faucibus non nec massa. Duis mattis vestibulum sagittis. Sed dapibus efficitur velit, vitae lobortis tortor cursus vel. Maecenas eu elementum enim. Nunc porttitor eleifend enim, sit amet dapibus enim hendrerit in. Quisque congue urna ut nulla placerat, ac pretium nisl elementum. Aliquam nec tristique diam. Quisque eget fringilla purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris orci arcu, porta sed ligula vitae, lobortis dignissim massa. Aliquam suscipit finibus augue non tincidunt. Aenean fringilla nulla eget urna ultricies, in imperdiet orci mollis. Pellentesque sit amet mattis ligula, vitae laoreet ex. Mauris molestie sodales condimentum. Vestibulum tortor dolor, scelerisque non molestie nec, mollis eget sapien. Suspendisse commodo magna a est elementum, a faucibus nisl sagittis.
</p>
<p>
Proin facilisis non turpis a consequat. Duis a mi dapibus, tempor velit condimentum, aliquet quam. Ut ut sapien vestibulum orci egestas facilisis. In hac habitasse platea dictumst. Etiam porttitor libero mattis justo finibus, a mattis erat ullamcorper. Donec et ultrices metus, vestibulum dictum est. Sed bibendum sodales egestas. Duis molestie libero at tortor sagittis, sed pellentesque dolor gravida. Pellentesque metus ipsum, varius at gravida ac, maximus id urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<p>
Morbi gravida imperdiet mauris, id dictum quam congue in. Integer purus justo, pellentesque vestibulum euismod in, finibus ut neque. Sed imperdiet iaculis blandit. Mauris gravida, nibh quis placerat fringilla, nisl nibh tincidunt neque, et tincidunt dolor ex rutrum quam. In non tellus arcu. Sed feugiat nibh ac lectus volutpat, sed varius augue lobortis. Nullam velit magna, laoreet id egestas vitae, luctus et leo. Fusce ultricies dolor blandit nibh pulvinar, vel maximus augue rhoncus. Curabitur posuere, libero nec mollis eleifend, orci sapien sodales mi, non fringilla sem ligula non leo.
</p>
<p>
Maecenas id lobortis nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce mattis tortor ut enim laoreet, blandit dignissim augue sodales. Duis a est diam. Phasellus lobortis aliquam tellus. Sed sit amet elit pulvinar, volutpat dui sit amet, tempus dolor. Nam quis feugiat metus. Quisque dictum dui at sapien pulvinar tincidunt. Aliquam at ornare diam. Nam interdum lobortis urna ac aliquet. Integer in sollicitudin metus. Sed rutrum, dolor non venenatis malesuada, velit enim pulvinar dui, ac sagittis massa ante et arcu. Nullam arcu odio, varius porttitor aliquam congue, lobortis at nibh.
</p>
</div>
CSS:
.test {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
.test p{display:inline-block}
Here you can see how text breaks ONLY in paragraphs and nothing else. No need for dirty hacks, br or stuff like that. See fiddle
Related
Basically I am creating a script that inserts elements in a page. The problem is that most of the time the css on the page breaks the layout or colors of my element.
I have tried using the css property all to prevent that from happening
* {
all: unset
}
But there still some stuff getting styled, buttons and links on hover for example.
Is there a way to remove all the external styling from my elements?
I am also using React with styled components if that makes any difference.
Is there a way to remove all the external styling from my elements?
You can’t ignore existing styling, but you can override it by using a selector with high specificity. The most specific selector you can have is an ID selector. The reason your * rule is not helping is because it has low specificity.
p {
font-family: serif;
font-size: 12px;
color: blue;
padding: 1em;
background: lime;
border-radius: 1em;
}
#no-styling {
font-family: unset;
font-size: unset;
color: unset;
padding: unset;
background: unset;
border-radius: unset;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus leo vitae justo tempor, id porttitor ex condimentum. Nunc mauris nisi, aliquet a mollis in, sollicitudin vel ligula. Nam eget tortor sed velit feugiat molestie. Proin sollicitudin elit quam, nec elementum mi commodo ut. Phasellus eget aliquam neque. Ut quis odio sed felis condimentum vulputate et at augue. Cras iaculis eros a elementum eleifend. Suspendisse potenti. Cras et gravida nisl. Proin rhoncus, orci non tincidunt dapibus, augue sem suscipit risus, eget posuere ipsum erat non ex. Aenean quis bibendum lectus. In hac habitasse platea dictumst.
</p>
<p id="no-styling">
Vivamus hendrerit congue gravida. Cras in dignissim nibh. Aenean ornare nisi quis orci ornare, sit amet maximus lorem pellentesque. Nullam at enim rhoncus, volutpat ex egestas, ultrices augue. Phasellus vulputate consectetur orci a fermentum. Pellentesque in justo ante. Suspendisse potenti. Proin congue egestas metus, at interdum risus dignissim id. In dictum massa eu lacus finibus ultrices. Nulla maximus est nec purus sollicitudin efficitur.
</p>
<p>
Pellentesque diam orci, sollicitudin quis sollicitudin ac, commodo sit amet erat. Cras nec nibh vel quam cursus vestibulum ut nec tortor. Pellentesque at neque in mauris mollis bibendum. Maecenas condimentum pretium arcu ut eleifend. Sed tempus elementum nisl ac vehicula. Aenean id mauris eget lorem eleifend volutpat vitae sit amet libero. Morbi vestibulum nulla ante. Vivamus commodo consequat orci eu consequat. Mauris nisl sem, tempor id magna fermentum, tempus gravida eros. Sed imperdiet, quam vitae bibendum convallis, purus nisi rhoncus quam, ullamcorper ultricies lorem quam id nunc. Sed quis fermentum lorem. Sed eleifend condimentum efficitur. Maecenas id mauris ligula. Nunc quis lectus sit amet arcu imperdiet congue.
</p>
<p>
Nam scelerisque enim ut magna condimentum blandit. Curabitur dolor urna, convallis vitae cursus sed, aliquet non nisi. Vestibulum orci enim, venenatis vel dapibus in, hendrerit a odio. Curabitur et tristique risus, a pulvinar sem. Donec vel sapien nec sem pellentesque bibendum sed sed libero. Aliquam suscipit, neque vitae vestibulum luctus, augue magna molestie tortor, vel fringilla quam felis in mi. Phasellus cursus, felis in pretium cursus, massa elit sagittis ligula, id blandit nisl sem id leo. Aenean vitae dui feugiat dui vehicula rhoncus in lacinia urna. Etiam id justo sapien. Aenean quis lacus sed risus vehicula aliquam. Aliquam in lacus id velit ultricies rutrum a id lorem. Donec tristique vehicula convallis. In accumsan vitae nibh id laoreet. In sit amet leo quis lorem suscipit molestie non vitae ligula. Donec massa diam, blandit sit amet tempor faucibus, tincidunt molestie lorem. Phasellus sagittis convallis congue.
</p>
<p>
Sed sodales tincidunt condimentum. Aenean volutpat hendrerit dolor, eget auctor felis efficitur ac. Aenean quis dignissim orci, ut ullamcorper nibh. Vestibulum ullamcorper ac quam rhoncus commodo. Nullam pellentesque ipsum arcu, quis pellentesque est tincidunt vel. Nunc ornare quam eget dapibus placerat. Vivamus eget lectus in eros consectetur blandit. Donec porta ante lectus. Suspendisse a euismod arcu. Nulla sit amet laoreet nisl. Fusce mi diam, tempor et ante eget, mattis ullamcorper libero.
</p>
This question already has answers here:
How can you set the height of an outer div to always be equal to a particular inner div?
(2 answers)
Closed 10 months ago.
My aim is to have the height of the container limited to that of the image, with the overflow becoming scrollable on the y-axis.
I have tried grid-template-columns: repeat(2, minmax(0, min-content)) but to no avail.
Can some help me out? Such a small styling bug has been bugging me all day ;)
What i'm currently dealing with:
What i'm aiming for:
So, you want the height of the grid to be determined by the height of the image in the right column, not the height of the text in the left column? In that case, you need to remove the text from the flow by wrapping it in an element with position: absolute;. That way, its characteristics don’t affect the rest of the layout.
When you run this snippet, make sure you then click Full Page to see the effect properly.
body {
margin: 1em;
}
.g1 {
margin: 1em 0;
display: grid;
grid-template-columns: 1fr auto;
gap: 1em;
}
.w1 {
position: relative;
}
.w2 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
}
.w2 p:first-child {
margin-top: 0;
}
.w2 p:last-child {
margin-bottom: 0;
}
header, footer {
background-color: cyan;
padding: 1px 1em;
}
<header>
<p>Before</p>
</header>
<div class="g1">
<div class="w1">
<div class="w2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rhoncus velit ut metus pellentesque, non tincidunt erat sagittis. Donec mi justo, venenatis sed urna quis, consectetur vulputate lorem. Cras id ipsum at tellus porttitor egestas sit amet id eros. Phasellus aliquet nunc vel consectetur iaculis. Etiam dapibus, tellus sit amet consequat ultricies, sapien ante molestie tellus, nec tincidunt arcu ante vitae diam. Nam sed eros eu tellus gravida ultrices. Pellentesque vestibulum mauris ante, in vehicula massa lobortis sit amet. Nunc vitae mattis dui, quis porttitor justo. Phasellus sed suscipit sapien, ut tincidunt nibh. Phasellus rhoncus, magna quis faucibus malesuada, ipsum augue convallis diam, eu aliquam metus dolor non ante. Mauris accumsan dolor eu magna venenatis, et rhoncus orci varius. Sed eu urna eu tellus elementum mollis ac sit amet felis. Nam ultricies mi mattis nisi interdum lobortis. Nam tincidunt vehicula pretium.</p>
<p>Suspendisse eget aliquet ligula, at molestie dolor. Etiam scelerisque ac orci at scelerisque. Etiam arcu nisi, condimentum id erat viverra, mollis rutrum arcu. Proin ut mi aliquam, dictum nibh ac, varius massa. Aenean vitae ultrices purus. Phasellus eu tellus pretium, fringilla nunc eget, porttitor massa. Nulla pretium commodo velit id scelerisque. Vivamus faucibus volutpat purus id accumsan. In venenatis viverra vehicula. Phasellus quam leo, luctus nec consectetur vel, tincidunt ultrices urna. Integer tristique rutrum arcu, non placerat sapien luctus ut. Proin scelerisque dui ligula, vehicula maximus dolor scelerisque vitae. Curabitur ornare, lectus non ornare venenatis, odio sapien pulvinar erat, a luctus mi lacus vel ante. Sed eu porttitor erat.</p>
<p>Integer gravida maximus magna non finibus. Etiam mollis, nisl in dignissim interdum, nibh purus fringilla diam, sit amet luctus tortor arcu quis nibh. Maecenas consequat massa et libero luctus, nec gravida erat tincidunt. Praesent sed porttitor turpis. Morbi imperdiet finibus tellus, et dignissim neque vulputate in. Mauris vel vulputate sapien. Duis maximus velit at porta varius. Sed vitae gravida arcu, a condimentum leo. Maecenas elementum enim nibh, sed blandit urna pulvinar sit amet. Pellentesque vel efficitur dolor. Etiam at mollis nibh, ac rutrum nunc. Pellentesque auctor eget lorem ac suscipit. Quisque enim tellus, iaculis sit amet enim in, aliquet malesuada erat. Nullam venenatis at ligula sodales rhoncus. Nulla non velit quis tellus finibus pellentesque scelerisque sed ante.</p>
<p>In rutrum, felis vel fermentum malesuada, turpis ex semper nunc, eu tincidunt mauris nulla vel leo. Ut bibendum arcu urna, nec hendrerit nulla finibus ac. Proin ultrices tortor ac dolor consequat interdum. Curabitur at egestas lorem. In risus massa, faucibus at est sit amet, interdum convallis nulla. Sed ultricies leo lacus, sed pharetra risus porttitor vitae. Nunc tempus urna in dui egestas, eget eleifend lorem finibus. Pellentesque auctor nec est et rutrum. Fusce quis tincidunt lacus. Proin efficitur augue sed eleifend venenatis. Aenean mattis sed odio sit amet lobortis. Vivamus nibh arcu, scelerisque ac purus in, fringilla scelerisque orci.</p>
<p>Praesent volutpat ac justo a luctus. Sed eget orci risus. Sed faucibus turpis id ligula congue facilisis. Nulla facilisi. Aliquam egestas rutrum risus id varius. Etiam ac lacinia mi. Mauris sit amet facilisis arcu. Pellentesque metus nibh, vulputate vel dui fringilla, pellentesque dictum sapien. Praesent interdum nisl at sollicitudin maximus. Morbi ligula odio, hendrerit at risus condimentum, dictum mollis lectus. Sed lacinia rutrum maximus.</p>
<p>Sed orci nisl, cursus lobortis condimentum aliquet, rutrum et metus. Vestibulum sit amet dui mi. Mauris eleifend nisi nec elit euismod tristique. Sed feugiat, quam ac finibus pellentesque, orci dolor auctor nibh, vel pharetra odio mi at magna. Proin sed sapien a sapien consequat dapibus ut quis nulla. Maecenas sit amet feugiat metus, in dictum dolor. Ut sed condimentum dolor, nec congue sapien. Etiam aliquet tellus vitae nibh iaculis consectetur. Curabitur quis fermentum urna. Fusce varius ut erat et cursus. Donec nisl quam, placerat in porta id, ultrices ut diam. Aliquam nec lectus hendrerit arcu maximus egestas nec eu nisl. In id ex in risus vulputate aliquam eu sed ligula. Morbi vel blandit leo, commodo vulputate urna.</p>
<p>Donec facilisis vel lectus vel dapibus. Sed cursus felis vitae porttitor commodo. Quisque et nisi nec metus iaculis facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius elit ut tellus pulvinar elementum in ac nisl. Vivamus sagittis ligula ac egestas semper. Integer at gravida ipsum, et molestie ipsum. Etiam vitae metus ut felis vehicula gravida eget vel turpis. Quisque luctus, nibh a lacinia luctus, augue mauris suscipit ex, pulvinar ornare eros nisi ut urna. Phasellus vitae volutpat justo. Nullam ac elit dolor.</p>
<p>Etiam congue odio nunc, a mattis enim ornare eget. Quisque et sodales quam. Aliquam sollicitudin enim non enim interdum consectetur. Nullam bibendum mi sed massa euismod, pulvinar auctor magna dictum. Donec et lorem finibus, vehicula urna eget, ullamcorper massa. Mauris sem orci, dapibus sed consequat sit amet, malesuada et elit. Integer sit amet massa quam. Cras semper pellentesque urna, eget efficitur odio vestibulum vitae. Maecenas semper, sapien sit amet lobortis venenatis, ligula mauris placerat purus, at congue augue sem id mauris. Etiam gravida elit ut rhoncus varius. Ut nec est metus. Maecenas quis posuere diam. Pellentesque quis nulla interdum, consectetur ipsum eleifend, ultrices libero. Morbi tincidunt mauris at lorem egestas imperdiet quis ut est.</p>
</div>
</div>
<div>
<img src="https://onlinepngtools.com/images/examples-onlinepngtools/body-builder.png">
</div>
</div>
<footer>
<p>After</p>
</footer>
I wrote this sample code:
<div style="display:flex;flex-direction:row;width:100%">
<fieldset style="white-space: nowrap; width:100%; overflow:auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis est id posuere pellentesque. Donec sem lacus, consequat id consectetur a, semper in felis. Suspendisse potenti. Nam eu dapibus ex, nec convallis diam. Donec mollis sit amet nunc quis malesuada. Vestibulum semper cursus magna at commodo. Etiam tincidunt enim vel urna tempor dapibus. Praesent posuere nunc lorem, non dignissim ex semper sed. In hac habitasse platea dictumst.</p>
<p>Fusce molestie sapien a erat laoreet maximus. Phasellus id commodo dolor, pellentesque aliquet lacus. Nunc viverra nec mi nec volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed varius tellus ante, non tincidunt arcu venenatis ac. Praesent non diam varius, tempus magna sed, bibendum dui. Curabitur lobortis leo tellus, a imperdiet est sodales a.</p>
<p>Suspendisse elit leo, feugiat in tortor eu, maximus mollis urna. Fusce gravida auctor sapien, ac lacinia diam. In quis nisl diam. Cras blandit elementum ornare. Nunc quam tortor, semper vitae lacinia quis, pulvinar at arcu. Praesent suscipit, urna vitae viverra tempor, eros nisl mollis enim, at lobortis sapien mi et purus. Donec at pretium purus. Praesent auctor turpis vitae massa semper elementum. Fusce tempus turpis sit amet aliquam rhoncus. Donec ligula mauris, accumsan eget consequat viverra, ultrices ac ipsum. Ut maximus convallis magna, id mattis tortor ornare non.</p>
<p>Suspendisse lacinia mi vel malesuada pretium. Vivamus sagittis vulputate tempus. Mauris feugiat enim et nisl volutpat sollicitudin. Sed eu leo lectus. Donec tempus consequat risus, pharetra tempus urna pharetra non. Aenean vulputate efficitur nisi, non egestas dui faucibus quis. Praesent semper eget neque sed vulputate. Nullam molestie tellus eu malesuada dignissim. Nullam tempus sed elit nec ullamcorper.</p>
<p>Pellentesque urna lorem, cursus quis tortor sit amet, elementum efficitur elit. Morbi blandit faucibus elit vitae finibus. Morbi neque mi, tincidunt non felis eget, mattis ullamcorper mi. Suspendisse potenti. Maecenas nec metus eu erat scelerisque interdum. Vivamus sit amet interdum dolor, sit amet pellentesque mauris. Morbi vehicula purus ac aliquet dictum. Curabitur lacinia purus id leo commodo pellentesque.</p>
</fieldset>
</div>
The fieldset width overflow the screen on chrome, but working fine on IE and Firefox.
check this on different browsers: http://jsfiddle.net/hideyatsu/wpe03rs6/
On Chrome the <fieldset> is given a min-width equal to the width of the content. You can remove this by putting in min-width: 0px; in the <fieldset> style.
http://jsfiddle.net/wpe03rs6/2/
You can put chrome hack css something like this:
#media screen and (-webkit-min-device-pixel-ratio:0)
{
#element { properties:value; }
}
may be this will help you.
Try like this: Demo
body {
overflow-x:hidden;
}
HTML:
<div style="white-space: nowrap; width:100%; overflow:auto;display:block">
<fieldset>... </fieldset></div>
Updated demo
I want to build the following UI behavior:
I have a responsive content followed by a new section, and that new section should have a background image than scrolls with the page, until reaching the top, and then freezes at the top.
I made a research and have found a few similar answers, but can't find anything specific for what I want.
I don't want to use a fixed background image resting at TOP LEFT, as I don't want the image to start at the top of the page.
This question has me off to a good start:
How can I make a div stick to the top of the screen once it's been scrolled to?
This fiddle also has parts of what I'm trying to do, but it's not there yet, and I'm stumped. (I've broken this code somehow, while trying to stumble along on my own. Pretend the big red box is the background image div.
http://fiddle.jshell.net/5y2b4xoL/
Essentially, the background image should not be fixed until it is scrolled to the top of the page, at which point it should become fixed.
Any help is appreciated.
you could use jQuery scroll() so when the scroll comes to your element it will make it stick by changing position,
see the following snippet:
$(window).scroll(function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = 155;
// set to whatever you want it to be
if (y_scroll_pos > scroll_pos_test) {
$("#scroller").css("position", "fixed");
$("#scroller").css("top", "0");
} else {
$("#scroller").css("position", "relative");
$("#scroller").css("top", "auto");
}
});
body {
min-height: 1400px;
background:yellow;
margin: 0;
}
h1 {
margin-bottom: 100px;
}
#scroller {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Scroller demo</h1>
<div id="scroller-anchor"></div>
<div id="scroller">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non tortor eros, nec rhoncus nulla. In fringilla, dui vel vehicula luctus,
nunc arcu ultricies nisi, eu adipiscing sapien orci nec justo. Nulla facilisis gravida tempus. Nunc interdum, dolor sed euismod rutrum, odio
turpis rutrum odio, iaculis venenatis nunc sem eu dui. Nulla venenatis, leo quis porta luctus, ipsum ipsum tempus nunc, in fermentum arcu odio
non ipsum. Vivamus bibendum pulvinar sapien a cursus. Nullam lobortis nibh eget odio placerat hendrerit. In non leo turpis, quis posuere augue
</div>
. Mauris auctor commodo quam, quis vulputate orci tincidunt et. Nulla tellus lectus, rhoncus ut malesuada eget, auctor ac ligula. Suspendisse mollis
tempus interdum. Proin non velit in lectus elementum interdum eu eget velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Nam lobortis, est ac elementum tincidunt, lacus dolor lacinia erat, eget ullamcorper augue justo in lectus. Aliquam eros felis,
fringilla sed cursus sit amet, consectetur nec tellus. Vestibulum ultricies auctor erat, ac facilisis felis fermentum id. Quisque sed rhoncus dolor.
Nullam hendrerit justo non lacus rutrum vitae pellentesque velit adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Phasellus pulvinar ultricies sapien, sed consectetur purus condimentum et. Nulla viverra accumsan condimentum. Ut sodales, lacus sed varius
porttitor, odio ipsum tristique odio, ac sollicitudin est urna at sem. Aliquam suscipit porta felis, sit amet aliquet justo ultricies ac. Proin a orci
et eros interdum dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean vehicula malesuada pretium.
Suspendisse potenti. Nullam at felis quam. Donec gravida mi et purus pretium vitae placerat lacus porttitor. Donec scelerisque pellentesque sollicitudin.
Nullam et lacinia urna. In velit magna, malesuada quis iaculis a, auctor at felis. Quisque hendrerit aliquam diam vel luctus. Vestibulum venenatis
sapien at libero mattis mattis. Etiam eu aliquet tellus. Cras malesuada ligula non urna auctor a pretium lorem placerat. Quisque pulvinar turpis
non nisi laoreet fringilla. Proin mollis enim id nisi egestas eget varius metus mattis. Nulla viverra dui quis velit gravida sodales. Nulla nec
nisi et ligula viverra eleifend. Aliquam ac lectus at nunc mattis volutpat. Suspendisse elit lorem, gravida nec lobortis non, venenatis nec odio.
Vestibulum et luctus sapien. Donec faucibus blandit urna, nec convallis metus aliquam suscipit. Curabitur fermentum purus ornare mauris auctor tristique.
Cras vel magna sit amet felis tempor dapibus nec id turpis. Duis eu tortor lorem. Nulla dapibus pellentesque enim lobortis feugiat. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi iaculis sem ut erat sodales non elementum elit bibendum. Duis ut mi tellus.
Integer consequat ligula mattis tortor aliquam ut hendrerit lacus tempus. Quisque suscipit magna nec nulla accumsan sit amet tempor nisi gravida. Mauris
pulvinar tortor id justo feugiat ultrices. Vestibulum vel ante orci, a venenatis tortor. Duis urna erat, imperdiet iaculis facilisis eu, convallis
et dolor. Suspendisse mauris ligula, luctus a pellentesque vitae, rhoncus eu lectus. Morbi eget leo sed magna varius pretium quis sit amet lectus
. Nunc sagittis molestie congue. Donec aliquet vestibulum dui, non placerat massa pharetra at. Maecenas ac massa elit, eget venenatis elit. Nullam
elementum aliquet nisi, eu luctus libero fringilla sed. Maecenas vitae mauris nisi, a egestas lectus. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Donec lobortis malesuada libero, a tempus tortor auctor et. Vestibulum iaculis eleifend neque, et
consequat augue adipiscing sit amet. Integer sodales dictum nibh et suscipit. In congue sollicitudin erat et imperdiet. Proin tellus enim, bibendum
a sollicitudin non, accumsan at nisl. Phasellus vulputate elementum ligula a volutpat. Etiam scelerisque sollicitudin massa id convallis. Duis bibendum
molestie tempus. Vivamus lacinia accumsan quam, at aliquam mauris ultrices at. Sed malesuada faucibus massa, lobortis pharetra diam accumsan a.
Curabitur dignissim nunc vitae erat laoreet a laoreet sem bibendum. Etiam eu varius erat. Integer porttitor porta tincidunt. Nam dictum tellus
bibendum tellus interdum ullamcorper. Phasellus justo lorem, semper in vehicula interdum, vestibulum ac purus. Integer hendrerit lectus at nisi luctus aliquet.
Donec consectetur nisi vel metus viverra porttitor vel non lectus. Proin eget enim sagittis ligula mattis posuere ut varius ligula. Mauris euismod
tempus sem nec pretium. Donec congue suscipit libero, id pretium dolor luctus sed. Donec sed metus id nulla tempor vulputate non vel nisl.
Vestibulum a turpis vitae leo commodo pulvinar eu vitae enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
I want to indent the text below the image.
This is my original text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi blandit vehicula diam vitae dictum. Nunc ut justo eu tellus scelerisque feugiat id non justo. Ut eu ex id orci congue euismod. In efficitur nisi sed ante molestie, malesuada tristique ex accumsan. Suspendisse non tempus sem, ut eleifend est. Cras bibendum mi non odio lacinia volutpat. Integer interdum nisi quis porta posuere. Nulla mollis, felis a auctor consectetur, leo orci venenatis magna, in eleifend quam lacus ac felis. Sed sodales neque a euismod pulvinar. Suspendisse non diam elementum arcu feugiat venenatis. Nulla pulvinar, est ut eleifend hendrerit, tortor ipsum mattis eros, non feugiat diam lacus accumsan metus. Suspendisse sollicitudin metus ac luctus consequat. Nulla eget elit tincidunt, finibus ipsum nec, congue dui. Curabitur ac scelerisque magna. Duis sagittis varius sapien ut porta. Quisque rhoncus dapibus ultrices.
Maecenas eu neque fermentum, sagittis ligula nec, dignissim nisi. Maecenas et lectus lobortis quam blandit porta. Praesent vel gravida ante. Phasellus eu elit vitae nisi vulputate condimentum vel sit amet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque non est sed magna ornare tristique. Etiam aliquam sapien eu tellus laoreet luctus. Aliquam viverra lectus quis metus mattis euismod. Aenean faucibus ultrices nibh. Fusce vestibulum mauris in pretium ultrices.
and i want to indent the first line of each paragraph
by the way there's an image above the paragraph.
this is my code
<div class="caption"><img src="/html/images/sample-image.png" alt="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi blandit vehicula diam vitae dictum. Nunc ut justo eu tellus scelerisque feugiat id non justo. Ut eu ex id orci congue euismod. In efficitur nisi sed ante molestie, malesuada tristique ex accumsan. Suspendisse non tempus sem, ut eleifend est. Cras bibendum mi non odio lacinia volutpat. Integer interdum nisi quis porta posuere. Nulla mollis, felis a auctor consectetur, leo orci venenatis magna, in eleifend quam lacus ac felis. Sed sodales neque a euismod pulvinar. Suspendisse non diam elementum arcu feugiat venenatis. Nulla pulvinar, est ut eleifend hendrerit, tortor ipsum mattis eros, non feugiat diam lacus accumsan metus. Suspendisse sollicitudin metus ac luctus consequat. Nulla eget elit tincidunt, finibus ipsum nec, congue dui. Curabitur ac scelerisque magna. Duis sagittis varius sapien ut porta. Quisque rhoncus dapibus ultrices. Maecenas eu neque fermentum, sagittis ligula nec, dignissim nisi. Maecenas et lectus lobortis quam blandit porta. Praesent vel gravida ante. Phasellus eu elit vitae nisi vulputate condimentum vel sit amet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque non est sed magna ornare tristique. Etiam aliquam sapien eu tellus laoreet luctus. Aliquam viverra lectus quis metus mattis euismod. Aenean faucibus ultrices nibh. Fusce vestibulum mauris in pretium ultrices.<br><br>
how can i solve this in css code?
can anyone solve my problem? Thanks in advance.
wrap both texts in <p> tags
<div class="caption">
<img src="/html/images/sample-image.png" alt="">
<p>Lorem ipsum</p>
<p>Maecenas eu neque </p>
</div>
It would be easier for you to apply css on them in future
Here is the working Pen for you.
You need to write css for paragraph. For complete code take a look at Pen Link Please
p .paragraph{
word-wrap: break-word;
}
Did it solve your problem ?
I would assume you want something simple like this?
That question wasn't very descriptive. Nonetheless, I have made a complete example. Just run the snippet.
Mainly, the important part was this:
.indent {
text-indent: 2em;
}
But I included extra styling to make the answer more complete.
.caption-wrap {
width: 400px;
border: solid 2px #000;
padding: 20px;
}
.caption-wrap p {
margin: 0;
margin-top: 10px;
}
.captioned-image {
display: block;
width: 300px;
margin: 0 auto;
border: solid 2px #000;
}
.indent {
text-indent: 2em;
}
<div class="caption-wrap">
<img class="captioned-image" src="https://static.pexels.com/photos/20974/pexels-photo.jpg" alt="Captioned Image">
<p class="indent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi blandit vehicula diam vitae dictum. Nunc ut justo eu tellus scelerisque feugiat id non justo. Ut eu ex id orci congue euismod. In efficitur nisi sed ante molestie, malesuada tristique ex accumsan. Suspendisse non tempus sem, ut eleifend est. Cras bibendum mi non odio lacinia volutpat. Integer interdum nisi quis porta posuere. Nulla mollis, felis a auctor consectetur, leo orci venenatis magna, in eleifend quam lacus ac felis. Sed sodales neque a euismod pulvinar. Suspendisse non diam elementum arcu feugiat venenatis. Nulla pulvinar, est ut eleifend hendrerit, tortor ipsum mattis eros, non feugiat diam lacus accumsan metus. Suspendisse sollicitudin metus ac luctus consequat. Nulla eget elit tincidunt, finibus ipsum nec, congue dui. Curabitur ac scelerisque magna. Duis sagittis varius sapien ut porta. Quisque rhoncus dapibus ultrices.</p>
<p class="indent">Maecenas eu neque fermentum, sagittis ligula nec, dignissim nisi. Maecenas et lectus lobortis quam blandit porta. Praesent vel gravida ante. Phasellus eu elit vitae nisi vulputate condimentum vel sit amet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque non est sed magna ornare tristique. Etiam aliquam sapien eu tellus laoreet luctus. Aliquam viverra lectus quis metus mattis euismod. Aenean faucibus ultrices nibh. Fusce vestibulum mauris in pretium ultrices.</p>
</div>
Why don't you use the tab special character at the start of each line
add image style like below and wrap each paragraph inside <p> tag
<style>
.caption img{display:block}
</style>
<p>first paragraph</p>
<p>second paragraph</p>
...