I am experimenting with CSS's shape-outside property using an image, but at least in Safari, the resulting shape is always based on the original image size and I don't see any way of actually scaling the image based on the box size, which would be necessary for a truly responsive design (not to mention making life easier for initial testing purposes).
For example, in this CSS snippet:
#shapetest {
float: left;
width: 100px;
height: 300px;
background: url('some-image.png');
shape-outside: url('some-image.png');
background-size: contain;
}
while the background is scaled to cover the div, the shape is still at the original size of some-image.png, which isn't unexpected. However, I'd really like to be able to scale the shape to fit within the box, without having to generate multiple renditions of the shape.
Am I missing some sort of scaling function for shape-outside? The resources I can find on this indicate that the scaling factor for a shape-outside image isn't actually specified just yet, making this somewhat less useful for designs where the object might scale based on a viewport-relative size, for example.
EDIT: In particular I want to be able to specify the height of the image (and have the width respond accordingly). The initial answer on this question worked well with a specified width, but the following attempt at reproducing this doesn't work, as the specified height of the div flows the text downward, and setting the div to float:left causes its own box to supercede the shape in the flow:
div.inset {
height: 1.5in;
}
div.inset img {
float: left;
width: auto;
height: 100%;
shape-outside: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png');
}
<div class="inset"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum ornare fermentum. Praesent at leo volutpat, tempus eros vel, tempus diam. Morbi in viverra tortor. Etiam lobortis cursus elementum. Mauris eget lectus eget dolor posuere varius vitae a mi. Praesent nec commodo tellus. Nam facilisis tincidunt risus ac consequat. Nam arcu tellus, aliquam sodales metus vel, mollis porta purus. Suspendisse sagittis hendrerit dolor, sit amet accumsan libero cursus sit amet. Duis non fringilla ante. Vestibulum vestibulum scelerisque leo, sit amet elementum mauris. Donec eget dui mollis, venenatis dui non, viverra urna. Nam molestie, felis ut mollis ultricies, erat turpis ullamcorper sem, nec eleifend quam ex ac eros. Praesent sodales ligula quis dui maximus fermentum. Suspendisse tempor luctus elit.
Doing it with a specified width and computed height works fine, however:
div.inset {
width: 1.5in;
}
div.inset img {
float: left;
width: 100%;
height: auto;
shape-outside: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png');
}
<div class="inset"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum ornare fermentum. Praesent at leo volutpat, tempus eros vel, tempus diam. Morbi in viverra tortor. Etiam lobortis cursus elementum. Mauris eget lectus eget dolor posuere varius vitae a mi. Praesent nec commodo tellus. Nam facilisis tincidunt risus ac consequat. Nam arcu tellus, aliquam sodales metus vel, mollis porta purus. Suspendisse sagittis hendrerit dolor, sit amet accumsan libero cursus sit amet. Duis non fringilla ante. Vestibulum vestibulum scelerisque leo, sit amet elementum mauris. Donec eget dui mollis, venenatis dui non, viverra urna. Nam molestie, felis ut mollis ultricies, erat turpis ullamcorper sem, nec eleifend quam ex ac eros. Praesent sodales ligula quis dui maximus fermentum. Suspendisse tempor luctus elit.
The specs say the following:
The shape is computed to be the path or paths that enclose the area(s) where the opacity of the specified image is greater than the shape-image-threshold value. [...]
The image is sized and positioned as if it were a replaced element whose specified width and height are the same as the element’s used content box size.
So using the background-size property doesn't change anything to the element's content box size. Using the actual image element instead should make the computed shape respond to the current content box size of the image. You can now simply set a relative unit like % for the width of the image element to achieve responsiveness.
Here is a working example. You can change the width of the container and the width of the image as well as its shape should respond to the changing container width:
.shape {
float: left;
width: 100%;
shape-outside: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png);
}
.container {
width: 40%;
}
<div class="container">
<img class="shape" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png" />
</div>
This approach relies on a width-only div not having a height of its own, however. But this solution also works:
img.inset {
float: left;
width: auto;
height: 1.5in;
shape-outside: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png');
}
<img class="inset" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum ornare fermentum. Praesent at leo volutpat, tempus eros vel, tempus diam. Morbi in viverra tortor. Etiam lobortis cursus elementum. Mauris eget lectus eget dolor posuere varius vitae a mi. Praesent nec commodo tellus. Nam facilisis tincidunt risus ac consequat. Nam arcu tellus, aliquam sodales metus vel, mollis porta purus. Suspendisse sagittis hendrerit dolor, sit amet accumsan libero cursus sit amet. Duis non fringilla ante. Vestibulum vestibulum scelerisque leo, sit amet elementum mauris. Donec eget dui mollis, venenatis dui non, viverra urna. Nam molestie, felis ut mollis ultricies, erat turpis ullamcorper sem, nec eleifend quam ex ac eros. Praesent sodales ligula quis dui maximus fermentum. Suspendisse tempor luctus elit.
Related
I want to remove the horizontal scrollbar from my webpage. For which
i use overflow-x property
and pseoudo element property webkit-scrollbar in which I write display none.But the problem
still exists sometimes when I shrink my webpage. Like if I write the property over-flow-x:
hidden then on first time shrinking the screen , the horizontal scrollbar doesnot
show but on 2nd time shrinking screen it appears. This is the issue which I am facing. Please give me an appropiate solution as soon as possible.
Thanks.
Use this to hide scrollbar and preserve functionality:
body::-webkit-scrollbar {
display: none;
}
body {
-ms-overflow-style: none;
scrollbar-width: none;=
}
Add this along to remove scroll functionality:
body {
overflow:hidden;
}
Here:
html, body {
overflow-x: hidden;
}
.overflow {
width: 150vw;
}
<div class = 'overflow'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed ipsum in sapien sagittis pulvinar. Cras ornare massa urna, in volutpat quam feugiat sit amet. Sed in purus efficitur justo vestibulum scelerisque. Integer euismod ligula a nisl ornare, vel viverra mi mattis. Mauris dolor diam, tempus a risus in, malesuada fringilla tellus. Vivamus ultrices nisi non massa ultrices mollis at vitae neque. Vivamus viverra fringilla elit, eu suscipit libero dictum nec. Quisque lacinia mattis rutrum.
Aliquam ut dignissim magna. In eget maximus libero. Donec id velit vitae libero ultricies consectetur. Duis in tortor mattis, venenatis elit sit amet, iaculis ligula. Sed pulvinar nisi ut leo sollicitudin tempor. Ut nec erat sed nisl blandit efficitur. Donec varius sem vitae leo tincidunt, sed pretium tortor tempus. Morbi tempor sollicitudin sapien eget sollicitudin. Fusce maximus quis risus ac pretium. Duis non elit nec neque consectetur interdum vitae at lorem. Proin elementum sem justo, non congue orci cursus in. Nulla ac feugiat augue. Cras augue lorem, pretium non velit non, pulvinar accumsan dui.
</div>
If this doesn't work then you will have to post your code for us to fix it.
have you set margin for that? besides your given code is perfect. If you want to remove the scroll bar than view width should be according to the display or to give a width you can use max-width : 100%
-webkit-line-clamp css not able to add in email template. How can add this property in email template
I have made one video where i have added my needed property of css to inspect element then my desired result will be show then you can understand what i mean. Check this link for video video
It seems that you cannot have that functionality in an email.
Below are two sources with full lists and compatibility of email clients supporting CSS.
I could not find -webkit-line-clamp or line-clamp anywhere.
Here you can see all valid CSS for HTML emails https://caniuse.email/
EDITED:
Also here https://elasticemail.com/supported-css/
EDITED 2:
Maybe you could achieve something like that using overflow: hidden together with a gradient. There is no reason that would not work;
.text-truncate{
width: 300px;
height: 200px;
overflow: hidden;
}
.text-truncate p {
text-align: justify;
}
.text-truncate:after {
content: '';
display: block;
position: absolute;
top: 110px; /* Extra 10px */
height: 100px;
width: inherit;
background-image: linear-gradient( transparent 30%, white 70%);
}
<div class="text-truncate">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius imperdiet dui, nec dictum ante viverra eget. Aenean lobortis bibendum mi eget pulvinar. Mauris eu turpis ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris nec dolor tempor, aliquam est non, mollis augue. Fusce consequat enim arcu, vitae vulputate metus faucibus ac. Sed nec purus eget quam vulputate fringilla. Vestibulum nec metus est. Nam felis mauris, tincidunt vitae arcu non, vulputate luctus lacus. Pellentesque eget ultricies velit. Duis vehicula, velit eget maximus feugiat, lorem libero egestas turpis, eu ullamcorper nisl neque eget dolor.
Quisque quam orci, scelerisque mollis urna eu, suscipit tristique nunc. Phasellus sit amet sagittis mauris. Cras faucibus auctor quam, nec sollicitudin tellus volutpat id. In sed condimentum massa. Ut eleifend velit purus, et tincidunt dui ornare ac. Aenean finibus enim sit amet leo dignissim, sit amet egestas nibh iaculis. Nam sed lacinia diam, accumsan hendrerit tellus. Suspendisse maximus lobortis ligula quis finibus. Morbi eu libero in velit pellentesque convallis at bibendum lectus. Integer scelerisque, turpis sed sodales sagittis, dui augue cursus sem, ut bibendum tellus odio in leo.
</p>
</div>
Read More
I would like to... well look at the SO answer box. That is behavior what I'm looking for - scrollbar appears on text overflow but user can resize it manually.
My question is, is it possible to do such thing natively with CSS?
With my current setup, initially div is small (less then max-height) and I can resize it but only between current text height and max-height. When more text is inserted and scrollbar appear then I can't change it's size at all.
CSS
element.style {
resize: vertical;
max-height: 200px;
overflow: auto;
padding: 10px;
}
To be more precise I want following to happen:
If height of text is smaller then defined max-height then element sets it's size to minimal value needed for text to be completely visible (without scrollbar). - works
If height of text exceeds defined max-height then element will take max-height and scrollbar will appear. - works
If user don't wont to see scrollbar or simply want to see more text at once, he can resize the element to any desired height and max-height will take that new height as it's value. - don't work, user can't resize over max-height.
It would probably be faster to write JS than writing this question but I would like this have such behavior for static html pages.
Is this the styling you are looking for?
For example:
#element {
resize: vertical;
height: auto;
min-height:200px;
resize: vertical;
overflow: auto;
padding: 10px;
width: 95%;
border:1px solid;
}
<textarea id="element">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt, turpis eu aliquam aliquet, justo mi lobortis nibh, dictum sodales nunc quam non ipsum. Ut condimentum dui vel consectetur faucibus. Duis eu purus et massa ultricies blandit vel non felis. Morbi ut metus interdum, blandit mauris ac, vestibulum lorem. Etiam aliquam tincidunt magna, et ullamcorper enim pulvinar et. Aenean et auctor turpis, sed posuere eros. Integer magna lacus, accumsan sit amet hendrerit a, sagittis sed ipsum. Fusce leo neque, sollicitudin vel lectus eget, maximus cursus felis. Pellentesque rutrum volutpat enim, quis semper diam semper ac. Mauris ultrices molestie maximus. Vivamus feugiat posuere ultrices. Quisque blandit, lacus sed tempor ullamcorper, nunc ligula iaculis felis, ut eleifend mauris lacus a tortor. Fusce at cursus orci, at posuere nisi. In vel suscipit eros, eget cursus lacus.
Aenean ut neque sit amet orci gravida volutpat. Etiam vehicula nec augue ut vulputate. Integer fermentum est id leo mollis, quis accumsan quam commodo. Vivamus varius nibh turpis, ac tincidunt dolor consectetur non. Aliquam aliquam scelerisque orci sit amet posuere. Vivamus blandit quis ante vitae consectetur. Aliquam semper eros eu odio porttitor sollicitudin. Donec id mollis arcu. Etiam tortor est, dignissim sagittis lorem non, auctor commodo velit. Nulla facilisi. Morbi ultrices eleifend urna sit amet suscipit. Maecenas augue ante, lobortis at justo sit amet, malesuada faucibus justo. Nulla sit amet lorem in felis convallis feugiat ac fringilla urna. Vivamus finibus aliquam auctor. Fusce ante tortor, tempor id elit eget, sodales ultrices quam.
</textarea>
I have simple HTML document with 3 div's. The first 2 divs needs to float to left and the 3 div needs to float to the right. I am keeping the styles inline just for demonstration purposes.
I am trying to get the second div element to float to the left but it keeps floating to the right. This is the div element I am trying to have to float to the left
<div style="width: 200px; float: left">Left Div #2</div>
Can anyone please help me correct this? Thank you!!!
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width: 70%; float: left; clear: left">Left Div</div>
<div style="width: 200px; float: left">Left Div #2</div>
<div style="width: 30%; float: right; clear: right">Test</div>
</body>
</html>
The maximum width is 100% so you have 3 divs, 2 of them in percentage (70+30) which is equal to 100%, plus the 3rd div(Left Div #2) that you want to be floated left which has 200px.
So 100%-70-30=0 and 0-200px = -200px.
You have to fix either the width:70% or width 30% in order to match 100% (with 200px)
For example change your width:70% to width:50% and it works.
You always can try display them in inline-block
Updated answer based on the OP comment
you can't have 3 divs with the total more than 100% and what them to appear inline, as you did in your comment: 70%+70%+30% = 140% > 100%.
this code is working:
div {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
padding:10px;
display:inline-block;
vertical-align:top;
width:30%
}
.r1 {float:right} /*just because you said you want your 3rddiv floated right */
<div class="l1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed nunc eu sem bibendum maximus. Quisque ante mi, porta at egestas sit amet, tempor vel ante. Aenean libero risus, mollis id efficitur sed, fermentum in lacus. Quisque ultricies eleifend leo, at convallis dui auctor eu. Vestibulum eu odio varius, sagittis lectus sit amet, varius elit. Aenean tincidunt vel eros in rhoncus. Curabitur sed est lorem. Nam sed lorem vestibulum, sagittis ex nec, euismod ipsum. Donec at eros mollis, pulvinar ex at, porttitor arcu. Integer posuere lectus sit amet nisl volutpat, pharetra commodo risus congue. Aenean tincidunt elit nec pulvinar vestibulum. Suspendisse potenti. Suspendisse volutpat magna nec nisl lacinia accumsan. Donec a auctor ante.
</div>
<div class="l2">Aliquam iaculis id sapien at hendrerit. Phasellus tempus euismod felis et interdum. Mauris vehicula felis sed nisl auctor lacinia. Mauris posuere orci at porttitor viverra. Mauris eget bibendum purus. Cras tristique dignissim ex. Phasellus eu ipsum finibus neque lacinia laoreet et non neque.</div>
<div class="r1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed nunc eu sem bibendum maximus. Quisque ante mi, porta at egestas sit amet, tempor vel ante. Aenean libero risus, mollis id efficitur sed, fermentum in lacus. Quisque ultricies eleifend leo, at convallis dui auctor eu. Vestibulum eu odio varius, sagittis lectus sit amet, varius elit. Aenean tincidunt vel eros in rhoncus. Curabitur sed est lorem. Nam sed lorem vestibulum, sagittis ex nec, euismod ipsum. Donec at eros mollis, pulvinar ex at, porttitor arcu. Integer posuere lectus sit amet nisl volutpat, pharetra commodo risus congue. Aenean tincidunt elit nec pulvinar vestibulum. Suspendisse potenti. Suspendisse volutpat magna nec nisl lacinia accumsan. Donec a auctor ante.</div>
The box-sizing properties were added only to add the padding property without changing the width of the divs, so it is for demonstrations purposes only.
See more info here about box-sizing
See more info here about display and inline-block
Change the width:70% to match value.(In my case, width:30%)
This is a jsfiddle.
The reason why is width:70% has too much width to push other divs.
I have a content container that is 500px wide and floated to the right. This container contains text and then an image and then some more text. Ultimately I would like to pull this image out of the bounding 500px container and have it span the full width of the page, which for argument sake is 1000px wide. In effect the images will be full-width (1000px wide) while the content container is only 500px wide. What is the best way to do something like this so that the image can be at full width?
jsfiddle.net/QCb3R/
I would like to pull the image to extend fully outside of the .content div.
<div class="container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id dapibus mauris. Curabitur lectus metus, tincidunt sit amet varius et, euismod et neque. Sed a odio odio. Morbi placerat condimentum fermentum. Nam eleifend congue malesuada. Vivamus vel lorem eu leo blandit placerat. Nunc turpis justo, iaculis vestibulum interdum sit amet, luctus nec dui. Duis ultrices eleifend sem eget mattis. Quisque at purus nisi. Duis porta porttitor nisi nec ornare. Nam eu dolor urna, a suscipit libero. Morbi risus dui, egestas eget consectetur quis, malesuada vitae orci. Maecenas pulvinar malesuada elit eget sagittis. Curabitur congue, mauris quis pretium ultricies, augue nisl dapibus libero, eu lacinia sem nunc commodo purus. Quisque tellus purus, sodales a consequat in, adipiscing in odio. Donec non felis at felis sodales varius vitae non lorem.</p>
<img src="http://lorempixel.com/500/300/" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id dapibus mauris. Curabitur lectus metus, tincidunt sit amet varius et, euismod et neque. Sed a odio odio. Morbi placerat condimentum fermentum. Nam eleifend congue malesuada. Vivamus vel lorem eu leo blandit placerat. Nunc turpis justo, iaculis vestibulum interdum sit amet, luctus nec dui. Duis ultrices eleifend sem eget mattis. Quisque at purus nisi. Duis porta porttitor nisi nec ornare. Nam eu dolor urna, a suscipit libero. Morbi risus dui, egestas eget consectetur quis, malesuada vitae orci. Maecenas pulvinar malesuada elit eget sagittis. Curabitur congue, mauris quis pretium ultricies, augue nisl dapibus libero, eu lacinia sem nunc commodo purus. Quisque tellus purus, sodales a consequat in, adipiscing in odio. Donec non felis at felis sodales varius vitae non lorem.</p>
</div>
</div>
And the CSS:
.container {
width: 1000px;
background-color: #eee;
}
.content {
width: 500px;
float: right;
}
It is quite easy to create that effect, but not by setting the image to be absolutely positioned.
Here's a jsFiddle
.container {
width: 1000px;
background-color: #eee;
}
p {
width: 500px;
float: right;
}
.content {
width: 1000px;
float: right;
}
The problem with setting the image to be absolutely positioned is exactly because it takes the image out of the normal document flow. You would have to fill up the gap left by the original image with a place holder element of the same height, and then position the absolutely positioned image over the top of the place holder element. That sounds like a job for JavaScript as it would require access to the DOM to retrieve the position of elements on the page, that can't be done with CSS and HTML only.