I have some text and an image floating to the right that looks like this :
The HTML looks like this :
<body>
<div id="container">
<div id="img"/>
<p>
What is Lorem Ipsum?..... etc
</p>
</div>
</body>
and the CSS that is placing the image looks like this :
#img {
background-image: url('http://www.w3.org/2008/site/images/logo-w3c-screen-lg');
background-size: 100%;
background-repeat: no-repeat;
background-position: top;
height: 140px;
width: 250px;
float: right;
}
When I make the screen smaller I would like the image to scale as well. I dont want it squeezing the text on the left. If I make the screen smaller then this is what it looks like :
So I try and use percentages instead of absolute values.
Unfortunately if I use percentages in my CSS I get nothing. See below :
#img {
background-image: url('http://www.w3.org/2008/site/images/logo-w3c-screen-lg');
background-size: 100%;
background-repeat: no-repeat;
background-position: top;
height: 30%;
min-height: 30%;
width: 30%;
min-width: 30%;
float: right;
}
How do I get my image to scale properly when I resize my browser?
playcode URL
If you set the height and width with percentages and the min values with pixels it works just fine.
height: 30%;
min-height: 300px;
width: 30%;
min-width: 150px;
Not sure if this is how you wanted it to be
playcode
I just updated your sample like this
html:
img {
float: right;
margin: 5px;
width: 40%;
min-width: 40%;
}
p {
text-align: justify;
font-size: 16px;
}
<div class="container">
<div>
<img src=
"http://www.w3.org/2008/site/images/logo-w3c-screen-lg"
alt="Longtail boat in Thailand">
</div>
<p>
Nunc pellentesque at sem ac sodales. Cras tellus ligula, pellentesque eget convallis nec, tincidunt et felis. Pellentesque nec magna pulvinar, rhoncus nisl nec, scelerisque ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vel nisi volutpat, accumsan orci et, pulvinar nunc. Nulla mi nibh, finibus a sollicitudin vitae, tincidunt a lectus. Aenean facilisis tincidunt tempus. Etiam vel lobortis sapien. Aliquam tempor eros ut mauris ultricies, vel mollis erat scelerisque. Mauris sit amet congue nulla. In pretium nibh vel massa feugiat, sit amet interdum dui bibendum. Donec molestie eros sem, eu pellentesque lectus sodales non. Integer sit amet sollicitudin ex. Maecenas interdum sapien in turpis convallis consequat. Sed ac mattis dolor.Nunc pellentesque at sem ac sodales. Cras tellus ligula, pellentesque eget convallis nec, tincidunt et felis. Pellentesque nec magna pulvinar, rhoncus nisl nec, scelerisque ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vel nisi volutpat, accumsan orci et, pulvinar nunc. Nulla mi nibh, finibus a sollicitudin vitae, tincidunt a lectus. Aenean facilisis tincidunt tempus. Etiam vel lobortis sapien. Aliquam tempor eros ut mauris ultricies, vel mollis erat scelerisque. Mauris sit amet congue nulla. In pretium nibh vel massa feugiat, sit amet interdum dui bibendum. Donec molestie eros sem, eu pellentesque lectus sodales non. Integer sit amet sollicitudin ex. Maecenas interdum sapien in turpis convallis consequat. Sed ac mattis dolor.
</p>
</div>
playcode
You could consider, making it a flex display on smaller devices, so that the text wraps after the image. Not sure, if this is what you're looking for, but it might improve user experience for smaller devices, otherwise the image may become too small to view and the text difficult to read.
Furthermore, this seems to be one of the valid use cases for the otherwise not outdated, but rather old fashioned layouts. I haven't seen floats recently. I suppose I tend to stay away from them.
Hope this helps.
img {
--smallest: 350px;
float: right;
margin: 5px;
width: min(var(--smallest), 40%);
}
p {
text-align: justify;
}
#media screen and (max-width: 700px) {
.container {
display: flex;
flex-flow: column;
}
img {
width: 70%;
}
}
<div class="container">
<img src="http://www.w3.org/2008/site/images/logo-w3c-screen-lg" alt="Longtail boat in Thailand">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. At explicabo quis officia animi culpa, dolorem, rem omnis possimus soluta dolorum delectus! Alias assumenda laboriosam hic! Dignissimos porro explicabo debitis blanditiis? Lorem ipsum dolor, sit
amet consectetur adipisicing elit. Eum quos dolorum ullam! Voluptas architecto quia, error possimus officia magni illo laudantium, voluptatibus harum tempora quas quisquam corporis aperiam ullam aut! Lorem ipsum dolor, sit amet consectetur adipisicing
elit. Culpa quibusdam rerum, iure ut ipsa soluta ipsam optio voluptatibus quis quasi facere neque, quam odio, eaque inventore vero est? Molestias, quia! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum sapiente ex temporibus quasi
modi inventore corrupti molestiae, placeat culpa incidunt, repudiandae iste tempora maiores sit ab fuga sequi, laudantium commodi. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime beatae voluptatum iure quis odit itaque quaerat natus.
Labore incidunt minima exercitationem impedit ipsam, porro reprehenderit cupiditate illum deleniti dicta ea?
</p>
</div>
Thanks for everyones tips.
I found my own way of solving this by using viewport width and aspect ratio.
If I specify the width as always being a percentage of the screen width (vw) then the image will proportionally resize when making the screen smaller.
You need to define some kind of height as well, but if you use vh, or some other kind of height attribute then you get weird results. If you use aspect-ratio 2/1 or whatever the dimensions of the image are, then that takes care of height and preserves the ratio.
#img {
background-image: url('http://www.w3.org/2008/site/images/logo-w3c-screen-lg');
background-size: 100%;
background-repeat: no-repeat;
background-position: top;
min-width: 30vw;
aspect-ratio: 2 / 1;
}
https://playcode.io/1141029
Related
This question already has answers here:
Second line in li starts under the bullet after CSS-reset
(4 answers)
Closed 6 months ago.
I have created a list with custom-sized bullet points using the below code. I am trying to figure out how to keep the text in line with the bullet points when the screen size changes.
For example when this happens
How can I get the words threatened and uncommon to stay in line when they have to move to a new line?
ul {
overflow-wrap: break-word;
}
li {
list-style-type:none;
}
li:before{
content: '\00b7';
font-size: 800%;
line-height: 14%;
vertical-align: middle;
}
<ul>
<li><span>Not Threatened</span></li>
<li><span>Naturally Uncommon</span></li>
<li><span>Relicit</span></li>
<li><span>Recovering</span></li>
</ul>
The most simple solution is to use list-style-position: outside:
ul {
list-style-position: outside;
}
<ul>
<li>Long<br>Sentence</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero urna, pharetra eget mi quis, volutpat fringilla lectus. Mauris lobortis elit vel fringilla ornare. Nulla fringilla eros vitae convallis malesuada. Donec ornare vulputate condimentum. Pellentesque magna arcu, tempus vitae malesuada vitae, efficitur sit amet nisi. Donec sed facilisis turpis, id elementum erat. Sed dapibus enim ex, ac bibendum mauris eleifend fringilla. Proin commodo nunc quis massa mollis bibendum. Sed commodo erat ac lorem tempor, sed condimentum metus volutpat. Donec venenatis quam arcu. Nullam euismod, odio at blandit dignissim, sapien velit tincidunt enim, eget dapibus dui dui quis purus. Cras pharetra magna nec nulla tincidunt tristique. Sed consequat nisl ullamcorper orci bibendum, eget suscipit erat eleifend.</li>
</ul>
I'd suggest the following:
ul {
/* using CSS grid to use grid layout: */
display: grid;
/* setting a gap of 0.25em between adjacent
elements, for both rows and columns: */
gap: 0.25em;
/* defining two columns, one of min-content
occupied by the ::before pseudo element;
and the other taking 1 fraction of the
remaining space: */
grid-template-columns: min-content 1fr;
overflow-wrap: break-word;
}
li {
/* effectively 'removing' the <li> box from
the layout calculation, to allow us to
style the contents and have them placed
into the grid layout of the <ul>: */
display: contents;
list-style-type: none;
}
li::before {
content: '\00b7';
font-size: 800%;
line-height: 14%;
}
<ul>
<li><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit distinctio neque odio eum dolore quas quaerat quisquam, rerum facilis voluptatibus.</span></li>
<li><span>Naturally Uncommon</span></li>
<li><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, ut tempore sapiente eum itaque animi inventore provident delectus asperiores harum quae quibusdam est, ipsam, quod consequuntur, molestiae autem minima. Saepe repellendus mollitia, ipsa quod, modi totam ad nobis vitae maxime.</span></li>
<li><span>Recovering</span></li>
</ul>
JS Fiddle demo.
References:
display.
gap.
grid-template-columns.
Bibliography:
"A Complete Guide to Grid," CSS-Tricks.
"[Basic concepts of grid layout]," Mozilla Developer Network.
Use in li white space nowrap
li { list-style: none; white-space:nowrap; }
Goodmorning,
I'm currently working on a project where I need to have a fixed button at the end of a div and then the ability to scroll the content of that div while still being able to see the button. Here is the code:
<div id="ModalEmail" class="detailModalContainer">
<div class="detailModal">
<div class="modalBoxHeader">
<h4 translate="EMAIL"></h4>
<div data-ng-click="$ctrl.close()">
<span class="icon ti-close"></span>
</div>
</div>
<div class="modalBody">
<div class="step">
<h4 data-translate="CHOOSE_TEMPLATE"></h4>
<div class="template-list">
<div class="template-item" data-ng-repeat="template in $ctrl.emailTemplates" data-ng-class="{ active: template === $ctrl.selectedTemplate }">
<div class="template-info">
<span>{{template.title}}</span>
<span class="ti-check"></span>
</div>
<div class="use-template" data-ng-click="$ctrl.selectTemplate(template)" translate="USE_TEMPLATE"></div>
<img class="template-preview" data-ng-src="data:image/jpeg;base64,{{template.preview}}" />
</div><br /><br /></div>
<span data-translate="CHOOSE_TEMPLATE_ERROR" class="labelPhoto" data-ng-class="{ labelShow: $ctrl.error }"></span><br /><br />
<span data-translate="NO_TEMPLATES_AVAILABLE" class="labelPhoto" data-ng-class="{ labelShow: $ctrl.emailTemplates.length === 0 }"></span><br /><br />
<div >
<button class="btn btn-template customize" type="button" data-ng-click="$ctrl.goToEdit()"><span data-translate="GO_EDIT"></span> <span class="ti-pencil"></span></button>
</div>
</div>
</div>
</div>
Inside of the .step div I print all the contents I need to visualize on my page, the button at the end of the code should actually be fixed. With that I mean that I should be able to scroll the content of div while still be able to see that button. I have tried with positioning without any results. Any recommendations? Thanks for your help in advance
This sounds like a job for flexbox. Here's a quick sample:
.container {
display: flex;
flex-direction: column;
overflow: hidden;
}
.body {
flex: 1 1 auto;
overflow: auto;
}
footer {
flex: 0 0 auto;
}
/* display styles only */
.container {
height: 200px;
width: 500px;
background: lightgray;
}
footer {
padding: 12px;
}
<div class="container">
<div class="body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam finibus libero in tortor venenatis, ac mollis ante posuere. Phasellus quam velit, suscipit at urna et, dictum dictum massa. Integer nec quam vitae tortor pretium varius et ac lacus. Ut luctus a purus in ultricies. Suspendisse vehicula ex vitae libero varius suscipit. Donec a mi at augue vestibulum tempus. Curabitur volutpat, magna in ullamcorper fringilla, neque massa hendrerit orci, eu hendrerit enim neque at nibh.
Pellentesque felis orci, convallis id mattis ac, iaculis eu odio. Nam varius, sem faucibus semper aliquet, dui nisi pretium purus, sed malesuada libero neque a lacus. Cras vulputate ullamcorper justo, et pellentesque ante tincidunt non. Integer pharetra at urna a tempus. Cras et elit dolor. Quisque at bibendum turpis. Suspendisse potenti. Integer in sapien ac nunc volutpat lacinia. In facilisis diam vitae lobortis lacinia. Nam eget aliquam libero. Praesent elementum luctus imperdiet. Suspendisse sit amet dictum ipsum.
Etiam blandit nunc ut tellus lobortis, quis interdum diam mollis. Vivamus auctor justo quis fermentum fermentum. Fusce justo augue, eleifend ut placerat in, cursus a tortor. Nam fringilla, ex non varius ultrices, est nulla interdum dolor, vitae varius purus enim eget lacus. Vivamus vulputate eu purus at molestie. Morbi dictum, nibh eleifend porta ullamcorper, felis quam pharetra eros, in facilisis nibh velit ut mi. Cras faucibus pharetra nunc vitae finibus. Mauris dui dolor, lobortis iaculis leo ac, mollis varius velit. Nulla tincidunt mauris eu magna tristique suscipit. Sed tempor orci magna. Suspendisse est nulla, accumsan nec aliquet auctor, ultrices vel odio. Proin dapibus tortor vel lacus porttitor, ac tincidunt sapien faucibus. Sed neque urna, ornare vitae ultricies ut, rutrum et magna. Fusce pulvinar tellus ultrices nunc vulputate consequat a in arcu. Vivamus iaculis mi vel neque mattis, in malesuada felis mollis. Curabitur nec tempus tellus.
Cras dolor orci, laoreet eu turpis et, convallis aliquam velit. Sed porttitor in ipsum eget sodales. In vestibulum quam nec pulvinar ornare. Nulla ut consectetur tellus. Praesent sollicitudin condimentum tellus, efficitur dictum purus dictum sit amet. Maecenas ultricies libero id viverra varius. Praesent auctor arcu ac mauris posuere molestie. Quisque nisl nisi, aliquet vel venenatis eget, malesuada a lorem. Cras eget magna erat. Nunc quis erat dictum, sagittis enim et, placerat mauris. Curabitur consequat elit non nibh egestas, pulvinar condimentum nulla tristique. In ut auctor risus. Aenean magna felis, imperdiet quis lectus sed, ultrices mollis dui.
Aliquam non bibendum sapien, vitae euismod odio. Praesent consequat lobortis lectus nec dictum. Integer interdum sapien nibh, ac dictum mauris egestas sit amet. Sed pellentesque dolor id maximus pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tellus augue, lacinia in enim vel, eleifend efficitur ante. Curabitur non euismod mauris, ac consectetur metus. Nulla sed odio nunc. Integer placerat gravida scelerisque. Morbi sit amet neque id urna rhoncus faucibus non in libero. Integer diam quam, sodales non vulputate ut, accumsan nec ligula.
</div>
<footer>
Fixed footer
<button>Button</button>
</footer>
</div>
You can use overflow:hidden; overflow-y:scroll; on the div with the content.
<div class="outer">
<div class="inner">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia nemo voluptates exercitationem reprehenderit quo corrupti iste, facilis ipsa, similique, animi ducimus excepturi eaque sunt! Perferendis soluta modi ratione odio excepturi.</p>
<p>Quam, blanditiis. Error, dolore nostrum. Hic, recusandae maxime? Laudantium fuga maxime obcaecati suscipit voluptas quod debitis quaerat reprehenderit maiores, alias fugiat molestias quae aliquam commodi eius quas neque beatae dolorem!</p>
<p>Beatae quis repellendus, accusantium amet expedita nisi blanditiis eum omnis. Facere impedit beatae doloribus obcaecati temporibus a illum eligendi explicabo sed quia quo voluptas, sint nam qui eveniet dolorem laboriosam!</p>
<p>Nostrum eum voluptas culpa accusamus excepturi, suscipit a similique tempora alias fugit ullam consequatur molestiae velit animi doloribus ducimus neque debitis, placeat omnis, quisquam delectus corrupti repellendus. Corporis, nemo minus.</p>
<p>Velit magni voluptate animi error minus illo quisquam atque odit quaerat nam omnis, amet consequatur laboriosam eum assumenda reprehenderit debitis quos nesciunt unde perspiciatis nulla dolor a repellat. Eaque, voluptatibus!</p>
<p>Veritatis, neque delectus. Repudiandae tenetur optio facilis voluptas aliquam nostrum placeat consequatur maiores dignissimos inventore voluptates, eum illo a aperiam dolor quod recusandae doloremque repellendus. Ratione doloribus nostrum distinctio dolores?</p>
<p>Maiores et quae vel eveniet sint maxime totam quo reiciendis! Ea quam labore, asperiores voluptatibus animi reprehenderit quibusdam dolorum cupiditate sunt dicta dolore delectus expedita ducimus? Numquam culpa asperiores voluptatum.</p>
<p>Ipsum, excepturi. Iure nisi cumque dolorem praesentium mollitia impedit aperiam explicabo similique, sit vero, doloribus, reprehenderit iusto qui numquam eum assumenda quod nostrum esse voluptatem facilis. Debitis quidem adipisci omnis.</p>
<p>Delectus, nostrum dignissimos. Amet, ipsa incidunt explicabo vero perferendis autem laudantium et voluptatibus tempore officia debitis tenetur rem eveniet illo odio ipsam magnam impedit esse nostrum quas ipsum accusamus. Voluptatum.</p>
</div>
<div class="btn-wrap"><button class="btn">Click Me</button></div>
</div>
<style>
.outer {
/* ignore this just for presentation*/
max-width: 500px;
}
.inner {
overflow:hidden;
overflow-y:scroll;
height: 250px;
}
</style>
heres a codepen https://codepen.io/NeilWkz/pen/GzpqwB
On your example you add a height, and overflow:hidden; overflow-y: scroll; to the step class.
You can try this I just add <div class="popup">
<div class="popup-content"> and for the button I put the class="dismiss-popup-btn"
.popup {
position: absolute;
display: flex;
top: 0px;
left: 0px;
border: 2px solid #000;
width: 520px;
height: 150px;
background-color: rgba(0, 0, 0, .5);
color: #fff;
}
.popup p {
margin: 0 0 10px 0;
}
.dismiss-popup-btn {
position: absolute;
top: 120px;
right: 370px;
width: 60px;
height: 24px;
font-size: 15px;
line-height: 15px;
text-align: center;
background-color: #ffffe6;
}
.popup-content {
padding-top: 30px;
overflow-y: auto;
padding: 20px;
}
<div class="popup">
<div class="popup-content">
<p>Marty McLane has taught courses at each of our conferences. He is particularly adept at all things Ancestry.</p>
<p>Front-end development relies on organization and solid communication. Whether you're part of a team that builds large-scale sites or you're flying solo with a handful of quality clients, there are many pieces and steps to get a project from start to finish. And that's not just limited to the development phase of a project, either. Think about sales proposals, estimates, sign-offs, and approvals among many other things. There's a lot that goes into even what we might consider a routine … <p>Marty McLane has taught courses at each of our</p> conferences. He is particularly adept at all things Ancestry.</p>
<p>Front-end development relies on organization and solid communication. Whether you're part of a team that builds large-scale sites or you're flying solo with a handful of quality clients, there are many pieces and steps to get a project from start to finish. And that's not just limited to the development phase of a project, either. Think about sales proposals, estimates, sign-offs, and approvals among many other things. There's a lot that goes into even what we might consider a routine … <p>Marty McLane has taught courses at each of our</p> conferences. He is particularly adept at all things Ancestry.</p>
</div>
</div>
<div >
<button class="dismiss-popup-btn" type="button" data-ng-click="$ctrl.goToEdit()">button<span data-translate="GO_EDIT"></span> <span class="ti-pencil"></span></button>
</div>
I displayed text in a two columns layout, with column-count and column-fill: auto so that it fills completely the first column before going to the second.
I also need to add an illustration at the top right (top of the second column). With a position: fixed, the text won't wrap around the image but will hide underneath it. I tried float combinations with no success.
How would you approach this ? Thanks !
<div class="main">
<div class="description">
<div>
longish text
</div>
<figure>
<img class="illustration"
src="data:image:{{ p.id }}">
</figure>
</div>
</div>
.main {
margin-top: 2cm;
padding: 0 1cm 0cm 1cm;
column-count: 2;
column-gap: 2em;
column-fill: auto;
text-align: justify;
}
.produit-title {
color: firebrick;
padding: 2cm 1cm 0cm 1cm;
}
img.illustration {
margin-top: 0.1cm;
margin-left: auto;
margin-right: auto;
display: block;
max-height: 5cm;
max-width: 11cm;
border: solid 0.04cm;
border-color: firebrick;
}
expected result:
(edit) the text can be of variable length, but I would like the layout to stay the same. A short text can stop at the first column (role of colum-fill: auto), but the image would still be on the right.
Not an easy task at all. You can sort of hack it though, if your images have a fixed height:
div {
max-width:420px;
column-count: 2;
column-gap: 20px;
position: relative;
padding-top: 150px;
}
div img {
position: absolute;
top: 0;
right: 0;
height: 150px;
width: 200px;
}
div p:first-of-type {
margin-top: -150px;
}
<div>
<img src="http://via.placeholder.com/200x150px">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?orem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
</div>
The trick is to absolute position the image in the container then pull the text back up by setting a positive padding on the container and negative margin on the first paragrash, both equal number to the image height.
This is one of those things that definitely should be easier.
Can't you structure the html like this? Making sure that the image is positioned relatively inside the div?
<div class="main">
<div class="description">
<div>
longish text
<img class="illustration" src="data:image:{{ p.id }}">
more text
</div>
</div>
</div>
EDIT: If this does not work for you then as I see it you need to either decide where your image is always going to be e.g. always open your article with image followed by text and then you can position as required, or adopt some widely unsupported solution such as regions (https://www.html5rocks.com/en/tutorials/regions/adobe/).
Came upon this stack when trying to find a better solution than the one I went with which was the following. Only advantage to the accepted answer is it doesn't require absolute positioning. Still need to know the height of the image.
Note: the image does have to come before the text.
.columns {
columns: 2;
}
.image {
background-color: green;
width: 100px;
height: 100px;
column-span: all;
margin-left: auto;
}
.text {
margin-top: -100px; /* height of image */
}
<div class="columns">
<div class="image"></div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam erat velit. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Magna eget est lorem ipsum dolor. Feugiat in ante metus dictum at. Platea dictumst quisque sagittis purus sit amet. Nam aliquam sem et tortor. Velit dignissim sodales ut eu sem integer vitae justo eget. Tempor id eu nisl nunc mi ipsum faucibus vitae aliquet. Dapibus ultrices in iaculis nunc. Condimentum id venenatis a condimentum vitae sapien pellentesque. Luctus accumsan tortor posuere ac ut consequat semper. Viverra orci sagittis eu volutpat odio facilisis mauris. Suspendisse sed nisi lacus sed viverra tellus in hac habitasse. Et netus et malesuada fames ac turpis egestas sed tempus. Sit amet tellus cras adipiscing enim eu turpis egestas. Pretium vulputate sapien nec sagittis aliquam malesuada.
Dis parturient montes nascetur ridiculus mus mauris vitae. Morbi tristique senectus et netus et malesuada fames. Augue lacus viverra vitae congue eu consequat. Lobortis elementum nibh tellus molestie nunc non blandit massa. Dictum at tempor commodo ullamcorper a lacus vestibulum. Risus ultricies tristique nulla aliquet. Nulla pharetra diam sit amet nisl. Sed nisi lacus sed viverra tellus in hac habitasse. Arcu risus quis varius quam quisque id diam vel. Condimentum mattis pellentesque id nibh tortor id. Placerat duis ultricies lacus sed turpis. Quis eleifend quam adipiscing vitae proin sagittis. Ut tristique et egestas quis ipsum suspendisse. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla. Viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat.
</div>
<div>
I have CSS problem and I am wondering wether it is possible.
This case is simple but is really complicated and probably can be only done with a good CSS hack or trick.
I need to show an arrow if the text in the child element is higher than it's parent element.
I cannot use JavaScript in any form, only CSS.
Arrow can be anything, it can be a div element, a background-image or anything else because it doesn't have to do anything. Arrow should not be visible if the child size is smaller than parrent size.
HTML structure is example and if you have different idea I'm open minded.
I didn't put any code because I was not able to achieve this in any way.
Made this quick example, it relies on the z-index properties and 2 pseudo elements.
The before pseudo element is used to make the arrow at the bottom, it is absolutely positioned
the after pseudo element is stacked over the arrow but stays below the content
when the content is higher than the parent, the after pseudo element is pushed under the arrow and doesn't hide it anymore
Here is an example:
.wrap{
position:relative;
width:500px;
height:150px;
border:1px solid red;
overflow:hidden;
background:#fff;
}
.wrap:after{
content:'';
display:block;
position:relative;
height:inherit;
background:inherit;
z-index:2;
}
.wrap:before{
content:'\25BC';
position:absolute;
left:0; bottom:0;
width:100%; height:1.2em;
line-height:1.2em;
background:rgba(255,255,255,0.8);
text-align:center;
z-index:1;
}
<div class="wrap">
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut nulla hendrerit, scelerisque enim quis, feugiat lacus. Donec massa urna, faucibus at erat vel, auctor egestas risus. Etiam vitae urna sed urna vehicula lobortis. Nunc dapibus, neque vel consectetur lobortis, augue lorem gravida nunc, nec lacinia nunc lectus sit amet tellus. Sed efficitur urna risus. Mauris varius, est in vehicula dapibus, felis nunc convallis libero, at lacinia risus felis id libero. Sed elit ipsum, interdum at lorem vel, laoreet tristique ante. Praesent lectus mauris, finibus ut gravida sed, pulvinar quis orci.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut nulla hendrerit, scelerisque enim quis, feugiat lacus. Donec massa urna, faucibus at erat vel, auctor egestas risus. Etiam vitae urna sed urna vehicula lobortis. Nunc dapibus, neque vel consectetur lobortis, augue lorem gravida nunc, nec lacinia nunc lectus sit amet tellus. Sed efficitur urna risus. Mauris varius, est in vehicula dapibus, felis nunc convallis libero, at lacinia risus felis id libero. Sed elit ipsum, interdum at lorem vel, laoreet tristique ante. Praesent lectus mauris, finibus ut gravida sed, pulvinar quis orci.</div>
</div>
<div class="wrap">
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut nulla hendrerit, scelerisque enim quis, feugiat lacus. Donec massa urna, faucibus at erat vel, auctor egestas risus. Etiam vitae urna sed urna vehicula lobortis. Nunc dapibus, neque vel consectetur lobortis, augue lorem gravida nunc, nec lacinia nunc lectus sit amet tellus. Sed efficitur urna risus. Mauris varius, est in vehicula dapibus. Sed efficitur urna risus. Mauris varius, est in vehicula dapibus.Sed efficitur urna risus. Mauris varius, est in vehicula dapibus .</div>
</div>
This example doesn’t hide the arrow if the content is too small, but it does allow for the content to be expanded and read when it overflows.
.outer{
border: 2px solid red;
margin: 1em auto;
width: 350px;
display: flex;
flex-direction: column-reverse;
align-items: center;
}
.inner{
border: 1px solid gray;
padding: 0.5em 2ch;
max-height: 8em;
min-height: 8em;
overflow: hidden;
box-shadow: 0 -0.5em 0.5em gray inset;
transition: max-height 0.25s ease-in-out;
}
p{
margin-top: 0;
}
label{
margin: 0 auto;
transform: rotate(90deg);
transition: transform 0.25s ease-in-out;
}
.arrow{
margin: 0 auto;
display: none;
}
.arrow:checked + label{
transform: rotate(-90deg);
transition: transform 0.5s ease-in-out;
}
.arrow:checked + label + .inner{
max-height: 25em;
transition: max-height 0.5s ease-in-out;
}
<div class="outer">
<input class="arrow" id="arrow" type="checkbox" />
<label for="arrow">▶</label>
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est impedit fugit quasi dignissimos, itaque labore culpa, maiores sit optio officiis sapiente odit id repellendus accusamus nihil consequatur praesentium possimus dicta! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quos voluptas beatae nesciunt tenetur. Quas iste, odit sapiente facere vitae, tenetur soluta fuga odio perspiciatis unde blanditiis, voluptatum, doloremque suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis eius, voluptatum, architecto consectetur eaque quisquam possimus tenetur sunt quibusdam dolorem enim eum! Atque, at vel officia, non ipsa a unde!</p>
</div>
</div>
<div class="outer">
<input class="arrow" id="arrow2" type="checkbox" />
<label for="arrow2">▶</label>
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est impedit fugit quasi dignissimos.</p>
</div>
</div>
Can I make a non-breaking space between span content and text? I read about it, but don't see same situation.
<span style="some_style">
<span number="1">1</span>"Some big text"
</span>
I need to add a non-breaking space between span content (number="1") and the first word after it only.
Thank you
On seeing your example image, I'm not sure that what you are asking for is actually what you need.
I suspect that the 'number' span should actually be outside the containing block which would usually involve absolute positioning.
Like so.
.some_style {
display: block;
width: 50%;
margin: 1em auto;
position: relative;
text-align: justify;
}
span[number] {
position: absolute;
top: 0;
left: -1em;
}
<span class="some_style">
<span number="1">1</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est incidunt ducimus facilis quae magnam vel sit alias consequatur voluptate modi repellat enim eaque soluta accusantium.
</span>
<span class="some_style">
<span number="2">2</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est incidunt ducimus facilis quae magnam vel sit alias consequatur voluptate modi repellat enim eaque soluta accusantium.
</span>
In fact, using data-attributes, you can do this without the internal span entirely.
.some_style {
display: block;
width: 50%;
margin: 1em auto;
position: relative;
text-align: justify;
}
.some_style:before {
position: absolute;
content: attr(data-number);
top: 0;
left: -1em;
}
<span class="some_style" data-number="1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est incidunt ducimus facilis quae magnam vel sit alias consequatur voluptate modi repellat enim eaque soluta accusantium.
</span>
<span class="some_style" data-number="2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est incidunt ducimus facilis quae magnam vel sit alias consequatur voluptate modi repellat enim eaque soluta accusantium.
</span>
So you want super script!
Use the <sup> tag to do this.
The sup tag makes it go up and become smaller.
Here's the fiddle: http://jsfiddle.net/yczs7qtp/4/
Hope it works!
I assume that what you want is that lines can't break between the numbers and the following words.
How you have it in the snippet works for me. If there is no space between the span and the next word, the line can't break between them. If you really want to have a NBSP there, you can have it with something like .number::after {content: "\A0";} in the following snippet.
.number {
vertical-align: super;
}
.number::after {
content: "\A0";
}
body {
width: 11em;
}
<span class="number">1</span>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus nec tincidunt erat. <span class="number">2</span>Integer lectus nulla, imperdiet semper pharetra nec, hendrerit ac tortor. Sed nec gravida enim. Quisque quis condimentum odio. <span class="number">3</span>Quisque at sodales arcu. Aenean sapien nibh, faucibus in est id, tempus pellentesque purus. Nulla imperdiet, sem eu pellentesque pretium, justo quam scelerisque neque, vel accumsan dui enim non elit.
I didn't find that this behavior is guaranteed, so, to be sure, you can wrap the number with the first word together with an element with white-space: nowrap; in CSS. That works even if there is space between the number and the word, like there:
no-br {
white-space: nowrap;
}
.number {
vertical-align: super;
}
body {
width: 11em;
}
<no-br><span class="number">1</span> Orci</no-br> varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus nec tincidunt erat. <no-br><span class="number">2</span> Integer</no-br> lectus nulla, imperdiet semper pharetra nec, hendrerit ac tortor. Sed nec gravida enim. Quisque quis condimentum odio. <no-br><span class="number">3</span> Quisque</no-br> at sodales arcu. Aenean sapien nibh, faucibus in est id, tempus pellentesque purus. Nulla imperdiet, sem eu pellentesque pretium, justo quam scelerisque neque, vel accumsan dui enim non elit.
I set the width of the text in the snippets so that the changes show to me. It may render differently to you, so here is an image of how they are supposed to look: